img固定宽高，图片等比缩小不变形
scale-down: 就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。cover: 保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸宽度和高度至少有一个和容器一致。fill: 默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。contain: 保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。none: 保持原有尺寸比例。同时保持替换内
·
object-fit的其它值
<img src="../../../image/logo.jpeg"></img>
<style>
img{
width:100px;
height:100px;
object-fit: fill; // 填充，撑满
object-fit: contain; // 保持原比例缩小
object-fit: cover;
object-fit: none;
object-fit: scale-down;
}
</style>object-fit属性值？
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
fill: 默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
contain: 保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下
cover: 保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸宽度和高度至少有一个和容器一致
none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)