如何使用 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中文网其他相关文章！