设置图片纵横比

如果你正在思考如何根据容器的宽度 按比例 设置高度，那么这个应该可以帮到你。

最近遇到一个响应式设计的需求，页面缩放时保持整体结构不变，按原有比例缩放，如下图：每行展示4个图片。

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

代码看似天衣无缝（当时了解需求的时候听说可能后续要增加课程，那我只要维护cate_list就可以了，随便你增加^_^）。

理想丰满，现实骨感 测试的时候发现，上边的代码在浏览器中表现的竟然是下面的样子！！！

为什么参差不齐？原因就在于需求方提供的图片尺寸并不是相同的！！！。

好吧，怎么让它们看起来相同？1. 图片设置固定高度（不可行，缩放之后就变形了）；2. 图片设置固定宽高比（可行，这样缩放后也能保持统一）

那么问题来了，本来宽度就是不固定的，怎样按比例设置高度呢？这就是下面讲到的 纵横比(aspect ratio)。

替换掉img标签

把之前的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;

.image_tag {
  width: 100%;
  aspect-ratio: 5 / 3;
}

这样就可以实现相同的效果。

各浏览器的支持情况如下