比如我们经常会用到5:3,4:3等图片比例作为缩略图
那么在列表显示的时候,如何保持这个比例,很简单,我们首先把3/5=0.6,那么比例就是0.6.
比例500:300
image.png
alt="">
Web前端开发之html5/css3/jquery #11
class="user-img" alt="">
黑背课堂
290人学习
Laravel
220
120
css关键部分就是.img,less写法
.img {
position: relative;
padding-bottom: 60%;
img
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
类推,如果是5:4,那么就是0.8,
.img {
position: relative;
padding-bottom: 80%;
img
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
如果觉得《html 设置图片显示比例 css巧妙设置等比例图片显示》对你有帮助,请点赞、收藏,并留下你的观点哦!