如果尺寸是百分比，如何保留圖像的縱橫比？

Question

我的圖像的寬高比爲16：9。我想每個圖像的寬度是整個瀏覽器窗口的33％，所以我可以堆疊每行3個圖像：

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

當我指定CSS width:33%，其高度不改變，以保持16：9的縱橫比。顯然，CSS不像HTML。在HTML中，只需要指定一個維度。

Answer 1

只需添加高度：自動。因此：

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

然後高度根據寬度調整本身。