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