如果图像的尺寸是百分比，我如何保留图像的纵横比？

Question

我的图片宽高比为16：9。我希望每个图像的宽度为整个浏览器窗口的33％，这样我就可以每行堆叠3个图像：

[ ] [ ] [ ]
[ ] [ ] [ ]
[ ]

当我在CSS中指定width:33%时，高度不会改变以保持16：9的宽高比。显然，CSS与HTML不同。在HTML中，只需要指定一个维度。

Answer 1

只需添加高度：自动..因此：

img {
     width: 33%;
     height: auto;
}

然后根据宽度调整高度。