在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中文網其他相關文章！
