很多时候网站编辑上传的图片,尤其是封面图片并不一定严格遵守设计尺寸,这就导致很多时候图片不按正常的比例显示,看起来非常丑,解决办法就是使用 css 的 object-fit
与 object-position
属性。


实现代码
img {
width: 180px;
height: 130px;
object-fit: cover;
}
详细说明
object-fit
object-fit 属性决定了像 img 和 video 这样的替换元素的内容如何适应到其使用的宽高确定的框。
属性值:
fill | 默认,不保证保持原有的比例,内容填充整个内容容器。可能会被拉伸。 |
contain | 保持原有尺寸比例。内容被缩放。宽高至少有一个和内容区域的宽高一致,会出现空白。 |
cover | 保持原有尺寸比例。但部分内容可能被裁切,内容可能不会被完整显示。 |
none | 保留原有元素内容的长度和宽度,也就是说内容不会发生变化。 |
scale-down | 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。最终呈现的是尺寸比较小的那个。 |
initial | 设置为默认值. |
inherit | 从该元素的父元素继承属性。 |
属性示例:

object-position
object-position 属性一般与 object-fit 一起使用,用来设置元素的位置。该属性规定了可替换元素的内容在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分,则会显示该元素的背景(background)。默认值是 50% 50%,也就是水平垂直居中效果,其取值和CSS中 background-position 属性取值一样,表现特性也是一样,但 background-position 的默认值是0% 0% 。
object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;