如何讓瀏覽器遵守應用 css 的寬度和高度 html 屬性的縱橫比？

Question

我正在尋找一種在加載圖像之前為布局中的圖像保留空間的方法。
我通過向我的img添加width和height屬性來做到這一點。

這按預期工作：

 img { display: block; border: 1px solid tomato; }

 <img src="" width="300" height="400" alt="">

但是在我的 css 中，我想用max-width來約束我的圖像。
為了保持圖像的縱橫比，我需要設置height: auto 。 但如果我這樣做，圖像的高度就會崩潰：

 img { display: block; border: 1px solid tomato; max-width: 200px; height: auto; }

 <img src="" width="300" height="400" alt="">

有什么方法可以強制瀏覽器遵守縱橫比，可以從我的 html 屬性計算出來？

---

這似乎仍然是一個問題。 Firefox 和 Chrome 現在支持寬度和高度到縱橫比的內部映射。 這正是我需要的。

不過我注意到了一個實現細節：必須在圖像上設置src才能使其工作。 我提供的示例似乎將圖像標記為已完全加載並再次忽略縱橫比。

因此，對於延遲加載方法，我們需要將占位符圖像添加到src ，它具有正確的寬高比才能正常工作。

盡管該解決方案目前適用於 chrome 和 firefox，但我仍在尋找一種也支持舊版瀏覽器和 safari 的解決方案。（雖然不需要 IE）

Answer 1

所以，你可以通過一些我並不引以為豪的技巧來解決這個問題。

基本上，將圖像包裝在一個元素中，您可以將高度設置為根據圖像的最大寬度和屬性的圖像縱橫比計算得出的高度。

一些注意事項：

• 這設置了height ，而不是max-height ，因為盡管有屬性，但沒有設置src的圖像沒有固有高度。
• 如果height或width屬性的值，或者 CSS 中max-width屬性的值發生變化， style的height屬性的設置也必須改變。 很多要記住改變，這取決於你有多少圖像。

你可以用 JavaScript 解決這一切，但由於你沒有在問題上加上那個標簽，我想尊重它並給你一個純 CSS 的解決方案。

我添加了一個等待 2 秒的小 JavaScript，然后將圖像源設置為所提供尺寸的虛擬圖像，以顯示沒有失真並模擬加載緩慢的圖像。

 setTimeout(() => document.querySelector('img').src = "https://dummyimage.com/300x400/000/fff.png", 2000);

 img { display: block; border: 1px solid tomato; max-width: 200px; height: 100%; }

 <div class="img" style="height: calc((400/300)*200px)"> <img src="" width="300" height="400" alt=""> </div>