html 设置图片显示比例,css巧妙设置等比例图片显示

比如我们经常会用到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;

}

}