如何使用 Flexbox 使图像填充 Div，同时保持其纵横比？-css教程-PHP中文网

如何使用 Flexbox 使图像填充 Div，同时保持其纵横比？

Mary-Kate Olsen

发布： 2024-11-24 06:28:14

原创

366 人浏览过

How Can I Make an Image Fill a Div While Maintaining its Aspect Ratio Using Flexbox?

在 Div 中按比例进行图像填充

您的目标是用图像填充 div，同时保留图像的宽高比。与之前的线程不同，您希望图像始终填充 div，无论方向如何。

解决方案：Flexbox

为了实现这一点，我们可以利用 CSS flexbox:

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

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

登录后复制

说明：

设置容器div显示：flex并将其内容居中。
指定flex-图像上的shrink: 0以防止其缩小。
设置最小宽度： 100% 和 min-height: 100% 以确保图像填充 div。

示例：

<div class="container">
  <img src="some-image.jpg" alt="Could be portrait or landscape">
</div>

登录后复制

结果是填充图像div 同时保留其纵横比。无论是肖像还是风景，图像都会占据整个空间。

以上是如何使用 Flexbox 使图像填充 Div，同时保持其纵横比？的详细内容。更多信息请关注PHP中文网其他相关文章！