在编写小程序中,img有多个属性可以自动进行图片大小调整,当时一直在想,如果普通的css中也有一个属性多好
这里终于找到有一个关键的css属性,就是object-fit: cover;
,效果类似背景图片的background-size: cover;
属性
<style>
.box {
200px;
height: 200px;
}
img {
object-fit: cover;
100%;
height: 100%;
/* background-size: cover;
background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600607493202&di=ace740b…&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F1103202….jpg);
background-position: center; */
}
</style>
<div class='box'>
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600607493202&di=ace740b8f4ad255c5f5a5dbff98aa57f&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F11032021067b907d3ed754dd93.jpg"
alt="">
</div>