Css控制图⽚显⽰：object-fit属性（铺满盒⼦容器）
标题⽤来指定替换元素的内容应该如何适应到其使⽤的⾼度和宽度确定的框
object-fit和object-position 这两个CSS属性。他们使开发⼈员可以操作img或video中的内容，类似于我们可以⽤background-position和background-size操作背景内容⼀样。
// ⾸先是⼀个html结构，然后给定图⽚⾼宽然后使⽤object-fit:cover即可实现图⽚不变形
// ⽽且整体排版也不受影响
<img class="objectFit" src="objectFit.png">
.objectFit{
width:160px;
height:90px;
css中的position属性
object-fit:cover;
}
object-fit关键属性：
object-fit：fill
被替换的内容⼤⼩可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的⾼宽⽐不匹配其框的宽⾼⽐，那么该对象将被拉伸以适应。
object-fit:contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽⾼⽐。 整个对象在填充盒⼦的同时保留其长宽⽐，因此如果宽⾼⽐与框的宽⾼⽐不匹配，该对象将被添加“⿊边”。
object-fit:cover
被替换的内容⼤⼩保持其宽⾼⽐，同时填充元素的整个内容框。 如果对象的宽⾼⽐与盒⼦的宽⾼⽐不匹配，该对象将被剪裁以适应。
object-fit:none
被替换的内容尺⼨不会被改变。
object-fit:scale-down
内容的尺⼨就像是指定了none或contain，取决于哪⼀个将导致更⼩的对象尺⼨。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。