如何使用 CSS Object-Fit 修復圖片溢出和失真？

CSS Object-Fit：在響應式佈局中保持影像長寬比

使用CSS 的object-fit 時：包含屬性以確保圖像保持響應在Flexbox 容器中，您可能會遇到佈局保留原始圖像寬度的問題，從而導致不必要的滾動條。

了解 Object-Fit

在深入研究問題之前現在，讓我們澄清一下 object-fit 是如何運作的。此屬性定義了元素的內容應如何在其邊界框中縮放和定位。當設定為包含時，內容（在我們的例子中為圖像）將按比例調整大小，保持其縱橫比，並適合可用空間。

原始影像寬度問題

在提供的程式碼片段中，您已經定義了具有Overflow: auto 的容器，當內容超出容器的寬度時，它會引入滾動條。但是，影像的寬度保持其原始大小，導致佈局適應影像的初始尺寸。

解決方案

要修正此問題，您需要明確設定使用 CSS 的 width 屬性來設定圖片的寬度。這將確保影像的寬度符合容器的寬度，從而允許 object-fit 屬性正確縮放和定位影像，同時保留其縱橫比。

更新的程式碼

這是包含width 屬性的CSS 程式碼的更新版本：

<code class="css">img {
  object-fit: contain;
  width: 100%;
}</code>

透過新增width: 100% 規則，您可以指示瀏覽器將映像的寬度精確地適應其容器，允許object-fit: contains 屬性如預期運作。

以上是如何使用 CSS Object-Fit 修復圖片溢出和失真？的詳細內容。更多資訊請關注PHP中文網其他相關文章！