纯css实现高度与宽度成比例的效果(转)

这几天做一个列表,要求是在每一个item中的图片都能按照规定的比例显示.对于image标签来说,如果是自然的显示原图片的比例的话,
下面的css代码可以满足:( 在booststrap中,也是下面的写法)

.img{
display: block;
max-width: 100%;
height: auto;
}

前面的话（描述）

但是现在要求不一样了,比如我要求每个图片必须按照比如4:3的比例显示出来,不用在乎图片是否被拉伸变形.这样的目的是实现图片的响应不同设备,保证图片等比例.如果仅仅通过width和height属性是不到的,即便height设置成百分比.

可以设置的height属性的元素的高度基于包含它的块级对象的百分比高度。

当然,采用js的办法肯定是可以解决的,但是用了js后,总是有一个被强X的感觉,((⊙o⊙)…).不想用js怎么办.

解决

padding'如果是百分比的话,那这个百分比是相对于其父元素的宽度而言的

这样就能使用

padding-top/padding-bottom

来代替

height

属性了.比如你想要让元素的按在4:3的比例显示,

width

设置成了30%,那么

padding-top/padding-bottom

只需要设置成为
40%就可以了.同时把

height

设为0.css代码如下:

.img-3-4 {
margin: 10px;
padding-bottom: 30%;
width: 40%;
height: 0;
background-color: #dbe0e4;
}

点击这里查看效果

小结

到这里可以发现,要讲的不仅仅是图片

img

的怎么去按照固定的比例设置了,而是利用

padding

将元素设置为固定比例,核心就是利用

padding

属性的值是百分比的话,是以父级元素的

width

走的.

padding

真心十分好用,查阅一些资料,都说比

margin

的问题要少.

基础知识十分重要啊!!!基础好+做的多,才会有思路.

参考

纯css实现高度与宽度成比例的效果