设定图像比例

问题：我们现在有很多图像，它们大小不一但是大致相似。我们需要保持图像的宽度一致，按照css的默认设置，图像会保持原始比例，那么图像的高度会有区别，在网页排版时因为有高有低会出现空白的地方。我们需要解决的问题就是把所有图像设为同样的比例，比如16:9.

解决方法：我们可以给img外面套一层框架，设置框架的宽高比并隐藏溢出部分，代码如下：

div.image-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

然后html里可以这样使用：

<div class="image-container">
  <img src="img_src">
</div>