如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
在Web开发中，正确处理图片的缩放和裁剪是一个常见的需求。CSS的object-fit属性提供了一种简单而强大的解决方案。本文将详细介绍object-fit属性的各种值及其效果，并结合object-position属性，帮助你更好地控制图片的显示方式。
简介
在处理图片时，你可能会遇到需要保持原始宽高比的情况。保持宽高比可以防止图片被拉伸或压缩而出现失真。解决这个问题的常见方法是使用background-image CSS属性。更现代的方法是使用object-fit CSS属性。
在本文中，你将探索object-fit CSS属性中可用的fill、cover、contain、none和scale-down值的效果，以及它们如何裁剪和缩放图片。你还将探索object-position CSS属性以及它如何偏移图片。
先决条件
如果你想跟着本文学习，你需要：
- 了解CSS属性和值。
- 在style属性中使用CSS声明。
- 一个代码编辑器。
- 一个支持object-fit和object-position的现代网页浏览器。
观察示例图片的默认行为
考虑以下用于显示示例图片的代码：
<img
src="https://i-blog.csdnimg.cn/blog_migrate/c3cd4e389636adb5bea3df15a75b46a8.jpeg"
width="600"
height="337"
style="width: 600px; height: 337px;"
alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>
这段代码将在浏览器中产生以下结果：
这张图片的原始宽度为1200px，高度为674px。使用img属性，宽度被设置为600，高度被设置为337-保持了宽高比。
现在，考虑一种情况，布局期望图片占据宽度为300px，高度为337px：
<img
src="https://i-blog.csdnimg.cn/blog_migrate/c3cd4e389636adb5bea3df15a75b46a8.jpeg"
width="600"
height="337"
style="width: 300px; height: 337px;"
alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>
这段代码将在浏览器中产生以下结果：
结果图片不再保持原始宽高比，看起来被视觉上“压扁”了。
使用object-fit: fill
fill值是object-fit的初始值。这个值不会保持原始宽高比。
<img
...
style="width: 300px; height: 337px; object-fit: fill;"
...
/>
这段代码将在浏览器中产生以下结果：
由于这是浏览器渲染引擎的“初始”值，与缩放后的图片相比，外观没有变化。结果图片仍然看起来被压扁了。
使用object-fit: cover
cover值保持了原始宽高比，但图片占据了所有可用空间。
<img
...
style="width: 300px; height: 337px; object-fit: cover;"
...
/>
这段代码将在浏览器中产生以下结果：
在某些情况下，object-fit: cover会导致图片被裁剪。在这个示例图片中，原始图片的左右部分由于无法适应声明的宽度而未显示。
使用object-fit: contain
contain值保留了原始的长宽比，但同时也限制了图像不超出可用空间的边界。
<img
...
style="width: 300px; height: 337px; object-fit: contain;"
...
/>
这段代码将在浏览器中产生以下结果：
在某些情况下，object-fit: contain会导致图像未填满所有可用空间。在这个示例图像中，由于声明的高度比缩小后的高度更高，因此图像上方和下方会有垂直空间。
使用object-fit: none
none值根本不调整图像的大小。
<img
...
style="width: 300px; height: 337px; object-fit: none;"
...
/>
这段代码将在浏览器中产生以下结果：
在图像比可用空间大的情况下，它将被裁剪。在这个示例图像中，由于原始图像的某些部分无法适应声明的宽度和高度的边界，因此左侧、右侧、顶部和底部的一些部分不会显示。
使用object-fit: scale-down
scale-down值将根据哪种方式会导致更小的图像，显示像contain或none一样的效果。
<img
...
style="width: 300px; height: 337px; object-fit: scale-down;"
...
/>
这段代码将在浏览器中产生以下结果：
在这个示例图像中，图像已经被缩小，表现得像contain一样。
使用object-fit和object-position
如果object-fit产生的图像出现裁剪，那么默认情况下图像将居中显示。
object-position属性可用于改变焦点位置。
考虑之前的object-fit: cover示例：
现在让我们改变图像在X轴上可见部分的位置，以显示图像的最右边缘：
<img
...
style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
...
/>
这段代码将在浏览器中产生以下结果：
在这个示例图像中，乌龟已经被裁剪出图像。
最后，让我们观察一下如果指定的位置超出了可用空间的边界会发生什么：
<img
...
style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
...
/>
这段代码将在浏览器中产生以下结果：
在这个示例图像中，乌龟和鳄鱼的头部已经被裁剪出图像。图像的左侧还有一些空间，以弥补图像左侧的20%偏移。
结论
在本文中，您探索了object-fit和object-position CSS属性可用的值。
object-fit还支持inherit、initial和unset。
在项目中使用object-fit之前，请通过在Can I Use?上检查浏览器支持情况来验证它是否受到您预期受众使用的浏览器的支持。