如何使用 object-fit: contains 正確調整圖片大小

了解object-fit: contains 和映像調整大小

使用CSS object-fit: contains 使映像檔在Flexbox 容器中回應時，它是對於了解此屬性如何影響圖像寬度至關重要。儘管調整影像大小，佈局可能會保留原始影像大小，從而導致捲軸。

在 object-fit: contains 中，影像會按比例縮放，以便整個影像保留在指定容器內，同時保留它的長寬比。這可確保影像完全可見並避免裁剪。但是，它不一定會調整圖像大小以適合其容器的寬度。

要解決此問題，您需要將容器的CSS width 屬性設定為您想要映像的特定值或百分比

例如，如果您有以下HTML：

<code class="html"><div class="container">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="如何使用 object-fit: contains 正確調整圖片大小" >
</div></code>

和以下CSS：

<code class="css">.container {
  width: 50%;
  height: 50%;
}

img {
  object-fit: contain;
}</code>

影像將按比例縮放以適合.container，但影像的寬度將保持其原始大小。為了適合容器的寬度，您可以將 .container 的寬度指定為百分比或絕對值：

<code class="css">.container {
  width: 100vw;  // 100% of the viewport width
}

// or

.container {
  width: 500px;  // 500 pixels
}</code>

記住，object-fit: contains 僅確保映像在容器內可見無需裁剪。如果您需要專門根據容器的寬度調整影像的大小，則需要相應地設定容器的 width 屬性。

以上是如何使用 object-fit: contains 正確調整圖片大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！