如何在 CSS 中使图像按比例填充 Div？

如何在填充的 Div 中显示比例图像

在 CSS 中，在 div 中实现图像的完美适配可能具有挑战性，尤其是在以下情况下你想保留它们的纵横比。这是一个用图像填充 div 同时保持比例的简洁解决方案：

利用对象拟合

大多数现代浏览器支持 object-fit 属性，允许您控制图像如何在其容器内显示。对于这种情况，您可以使用以下 CSS：

.image-container {
  overflow: hidden;
}

.image-container img {
  object-fit: contain;
}

Object-fit: contains 确保图像填充容器，同时保持其原始比例。它还可以防止图像被裁剪或扭曲。

使用 Flexbox

另一种方法是使用 Flexbox。此技术允许您在 div 内居中并灵活调整图像大小，从而达到所需的效果：

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image-container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

在这种情况下，图像将始终填充 div 的可用高度或宽度，同时保持其纵横比。

实现示例

要实现此解决方案，只需将适当的 CSS 应用于包含图像：

<div class="image-container">
  <img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" alt="如何在 CSS 中使图像按比例填充 Div？" >
</div>

注意： 确保将 div 上的溢出属性设置为隐藏，以防止图像溢出到其边界之外。

以上是如何在 CSS 中使图像按比例填充 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！