使用CSS'object-fit：contain”時如何保持原始影像寬度？

CSS 物件適合：包含；在佈局中保持原始影像寬度

當使用CSS 的object-fit: contains 屬性在Flexbox 容器中調整影像大小時，影像本身可能會適當縮放，而佈局保留原始影像寬度。這可能會導致出現水平捲軸。

要理解為什麼會發生這種情況，了解對象適合的運作方式非常重要。讓我們來看一個更簡單的例子：

<code class="css">.box {
  width: 300px;
  height: 300px;
  border: 1px solid;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}</code>

<code class="html"><div class="box">
  <img src="https://picsum.photos/300/200?image=1069">
</div></code>

在這種情況下，img 元素被指示完全適合 .box 容器，同時保留其縱橫比。然而，由於容器的寬度是固定的，影像本身可能沒有足夠的空間來擴展。

這就是 object-fit: contains 發揮作用的地方。它會縮小圖像以適應容器的寬度和高度限制。但是，img 元素的原始寬度保持不變。這是因為 img 元素的 width 和 height 屬性僅影響影像的顯示大小，而不影響底層影像的實際大小。

要解決原始程式碼中的問題，您可以考慮：

• 在img元素上使用width: 100%和height: auto，讓它按照原來的長寬比自然縮放。
• 在容器元素上加入overflow:hidden來防止水平捲軸不再出現。

以上是使用CSS'object-fit：contain”時如何保持原始影像寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！