设置图片纵横比设置图片纵横比

【设置图片纵横比】如果你正在思考如何根据容器的宽度按比例设置高度，那么这个应该可以帮到你。
最近遇到一个响应式设计的需求，页面缩放时保持整体结构不变，按原有比例缩放，如下图：每行展示4个图片。

文章图片

这个需求看似简单，其实呢，也确实很简单... 开始写代码

.y_gap00 { margin: 15px 0 0 0!important; } .nice_title { text-overflow: ellipsis; white-space: nowrap; overflow:hidden; width: 100%; display: inline-block; } .image_tag { width: 100%; } .image { width: 100%; display: block; padding-top: 60%; background-repeat: no-repeat; background-size: cover; } .pointer { cursor: pointer; }

代码看似天衣无缝（当时了解需求的时候听说可能后续要增加课程，那我只要维护cate_list就可以了，随便你增加^_^）。
理想丰满，现实骨感测试的时候发现，上边的代码在浏览器中表现的竟然是下面的样子！！！

文章图片

为什么参差不齐？原因就在于需求方提供的图片尺寸并不是相同的！！！。
好吧，怎么让它们看起来相同？1. 图片设置固定高度（不可行，缩放之后就变形了）；2. 图片设置固定宽高比（可行，这样缩放后也能保持统一）
那么问题来了，本来宽度就是不固定的，怎样按比例设置高度呢？这就是下面讲到的纵横比(aspect ratio)。
替换掉img标签

.y_gap00 { margin: 15px 0 0 0!important; } .nice_title { text-overflow: ellipsis; white-space: nowrap; overflow:hidden; width: 100%; display: inline-block; } .image_tag { width: 100%; } .image { width: 100%; display: block; padding-top: 60%; background-repeat: no-repeat; background-size: cover; } .pointer { cursor: pointer; }

把之前的img标签改为div，来给div设置背景图。因为这个固定纵横比是借助div padding-top 实现的。
给 div.image 设置了 padding-top: 60%; 这样它的宽高比就是5:3，页面缩放保持不变。就是文章最上边的那张图的效果（当然每一个图片的大小相差不能太离谱哈）。
在线演示地址
总结 div 的 padding-top 在响应式设计时可以实现固定宽高比的效果，如 padding-top: 60%; 这样它的宽高比就是5:3。如果你正在思考如何根据容器的宽度按比例设置高度，那么这个应该可以帮到你。
续(终极解决方法) 上边的设置 div padding-top 是比较hack的方式。后来发现一个更加直接的方法，那就是直接设置img的 aspect-ratio: 5 / 3;