如何使用 CSS 設定元素的寬度與其高度成比例？

使用 CSS 按高度調整元素寬度

根據高度設定元素寬度可以透過 jQuery 實現，如原始問題所述。但是，可以使用 CSS 簡化此過程。

要實現此目的，請利用替換元素的概念，例如 。當僅指定高度時，這些元素本質上會調整其寬度以保持其縱橫比。

考慮以下範例：

.container {
  position: relative;
  display: inline-block;
  height: 50vh;
}

.container > img {
  height: 100%;
}

.contents {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.container 元素的高度決定最小寬度。透明的縱橫比為 1:1 可確保 .container 及其子 .contents 元素的寬度始終與其高度成比例。

或者，要保持 .contents 的縱橫比為 4:3，請設定 img 的高度達到133%。使用或 ;也是可行的。

對於需要根據寬度調整元素高度的情況，請參考使用 CSS 保持寬高比的指南。

以上是如何使用 CSS 設定元素的寬度與其高度成比例？的詳細內容。更多資訊請關注PHP中文網其他相關文章！