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

Linda Hamilton

发布： 2024-11-19 02:55:02

原创

268 人浏览过

How Can I Proportionally Fill a Div with an Image While Maintaining Aspect Ratio?

按比例用图像填充 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="https://picsum.photos/id/237/320/240" alt="" />
</div>

登录后复制

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

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

来源：php.cn

上一篇：如何防止Android上的Chrome自动调整字体大小？下一篇：CSS 中没有特定类的情况下可以选择最后一个子元素吗？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章