object-fit和object-position_定义图片和视频元素在容器内如何显示的css属性
共 4815字，需浏览 10分钟
·
2021-03-06 12:35
<body><img src="./demo.jpg" alt=""><style>img{width: 300px;height: 150px;}</style></body>
如果我们需要让该元素占据固定的宽高大小，而又不希望图片被拉伸变形，可以在img标签外套一个div（或其他父级元素），然后将固定的宽高加在父级元素上，这样img标签本身就可以只设定宽或高，让另一边自适应。
除此之外，还可以将该图片作为元素背景，然后通过background-size和background-position等背景相关样式属性来设置该图片显示的位置和大小。
但这些方法要么看上去颇为不便，要么并不适用于video标签中的视频元素。
为了更好且更方便地解决这类问题，我们可以使用接下来的这两个css属性——object-fit和object-position。
1、object-fit
css属性object-fit一般用在img或video标签上，定义了元素内容要如何适应容器的宽高，IE15及以前的版本不支持此属性。
常用属性值：
object-fit: fill;
默认值，内容可能会被拉伸以完全适应容器的宽高。和不使用该属性的效果一致。
示例：
<style>img{width: 300px;height: 150px;object-fit: fill;}</style>
图2-设置“object-fit: fill;”效果与不使用该属性一致，图片会被拉伸以完全适应元素宽高
object-fit: cover;
保持内容的原有宽高比例进行缩放，让图片的内容能够完全覆盖元素容器，图片可能会被剪切掉一部分。
示例
<style>img{width: 300px;height: 150px;object-fit: cover;}</style>
object-fit: contain;
示例：
<style>img{width: 300px;height: 150px;object-fit: contain;}</style>
图4-设置“object-fit: contain;”后图片会在img标签内按原有比例进行缩放，使图片全部显示出来，可以看见图片默认显示在容器正中间
object-fit: scale-down;
保持内容的原有宽高比例进行缩放，显示的效果将与属性值分别为none和contain时内容尺寸较小的那个相同（contain的效果见上方，none的效果见下方）。
示例
<style>img{width: 300px;height: 150px;object-fit: scale-down;}</style>
图5-可见在这个例子中，当object-fit属性值为contain时图片的显示尺寸更小，所以scale-down属性值与contain属性值效果相同
object-fit: none;
示例
<style>img{width: 300px;height: 150px;object-fit: none;}</style>
图6-图片内容保持了原有的宽高尺寸，因为原图过大所以没有完全显示出来，显示出来的部分在原图中处于中间位置
object-fit: initial;
将该属性的属性值设为默认值（object-fit属性的默认属性值是fill）。
示例
<style>img{width: 300px;height: 150px;object-fit: initial;}</style>
图7-将object-fit设为默认值，显示效果与fill相同
object-fit: inherit;
示例
<body><div><img src="./demo.jpg" alt=""></div><style>div{object-fit: contain;}img{width: 300px;height: 150px;}</style></body>
图8-只有父元素添加了object-fit属性为contain，img标签未添加该属性时的显示情况
<style>div{object-fit: contain;}img{width: 300px;height: 150px;object-fit: inherit;}</style>
图9-子元素img的object-fit属性设为inherit后，从父元素继承了该属性的值
2、object-position
object-position属性常与object-fit一起使用，一般用于img和video标签，它规定了元素内容在容器内显示的位置，默认为居中。该属性同样不被IE15及以前的浏览器支持。
常用属性值：
position
指定内容在容器中的具体位置，第一个值指定内容在x轴上的位置，第二个值指定内容在y轴上的位置，默认都是50%，两个值之间通过空格隔开。第二个值可以省略，如果省略则取默认值为居中。可用的表示位置的形式有：x%
可以用百分比来表示内容在容器中显示的位置。
示例
<body><img src="./demo.jpg" alt=""><style>img{width: 300px;height: 150px;object-fit: contain;object-position: 100% 0%;}</style></body>
left/right/top/bottom/center
可以使用方位值进行设置。
示例
<style>img{width: 300px;height: 150px;object-fit: contain;object-position: right bottom;}</style>
具体的距离（包括数值和单位）
示例
<style>img{width: 300px;height: 150px;object-fit: contain;object-position: 50px 50px;}</style>
图12-使用具体的距离进行设置可以准确明了的定位内容在x轴和y轴上的位置，内容超出容器的部分会被剪切
混合使用
指定内容在容器内的具体位置时，上述三种位置表示方法可以混合使用。
示例
<style>img{width: 300px;height: 150px;object-fit: contain;object-position: right 50px;}</style>
图13-不同的位置表示方法可以混合使用，一样会生效
initial
示例
<style>img{width: 300px;height: 150px;object-fit: contain;object-position: initial;}</style>
图14-object-position属性值默认为居中显示
inherit
从父元素继承属性值。
示例
<body><div><img src="./demo.jpg" alt=""></div><style>div{object-position: left;}img{width: 300px;height: 150px;object-fit: contain;object-position: inherit;}</style></body>
图15-img标签可以从父元素div处继承object-position的属性值，如图，图片不再默认居中显示，而是和div元素样式中定义的一样靠左显示
写在最后
本博文仅为学习记录和分享交流，如有错漏，还请帮忙指出，也欢迎更多补充，不胜感激。
最后
欢迎加我微信(winty230)，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...
