如何在保持纵横比的同时用图像按比例填充 Div？

按比例用图像填充 Div

在此线程中，用户寻求用图像填充 div，同时保持宽高比，无论图像方向如何。 div 隐藏了溢出，允许潜在的图像裁剪。

要解决此问题，建议从图像中删除宽度和高度属性，以保留其自然的宽高比。然后可以使用 Flexbox 将图像在 div 中居中。

这是实现此目的的 CSS 代码段：

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

以及相应的 HTML 示例：

<div class="fill">
    <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/237/320/240" class="lazy" alt="">
</div>

此解决方案利用 Flexbox 将图像居中并确保其填充 div，保持其比例。

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