纯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-top/padding-bottom属性,根据他的解释,`padding'若是是百分比的话,那这个百分比是相对于其父元素的宽度而言的

而做者使用到了另外一个属性overflow,另外，在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一块儿计算的。换句话说，即便将元素的 overflow 设置为 hidden，“溢出”到 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;
}

栗子以下: 点击这里查看效果

咱们发现不论背景图片或者颜色是什么样,我这个元素始终按照4:3的比例显示

小结

• 到这里能够发现,要讲的不单单是图片img的怎么去按照固定的比例设置了,而是利用padding将元素设置为固定比例,核心就是利用padding属性的值是百分比的话,是以父级元素的width走的.
• padding真心十分好用,查阅一些资料,都说比margin的问题要少.
• 今日头条的wap首页的列表也采用的这种方法.点击查看 今日头条的wap站
• 基础知识十分重要啊!!!基础好+作的多,才会有思路.

参考

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