如何在 CSS 中保持寬高比的同時實現 100% 寬度或高度？

在CSS 中保持寬高比的同時實現100% 寬度或高度

在CSS 中，設定width: 100% 並將height 設為auto（反之亦然）通常用於約束影像。但是，這可能會導致影像寬度或高度不成比例。

要在約束影像的同時保持縱橫比，請考慮以下方法：

使用DIV 進行約束和裁剪:

將嵌套圖像在DIV 中並設定其最大寬度、最大高度和溢出：隱藏。這將防止圖像超過指定尺寸並裁剪任何多餘部分。

保留縱橫比並限制最大尺寸：

使用最大寬度和最大高度屬性而不指定最小尺寸。這允許影像保留其縱橫比，同時確保其增長不會超過指定的最大尺寸。

範例程式碼：

<code class="css">.image-container {
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}</code>

此程式碼確保.image-container 中的影像在寬度或高度上都不會超過500px，同時保持其原始長寬比。

以上是如何在 CSS 中保持寬高比的同時實現 100% 寬度或高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！