如何使用 CSS 使元素的最小宽度等于其动态高度？

通过 CSS 根据高度设置元素宽度

问题：

如何确保元素的最小宽度等于其高度，而不显式设置高度？当高度是动态的并且无法预先设置时，这特别有用。

可能的解决方案：

1。 jQuery 方法：

使用 jQuery，您可以设置元素的最小宽度以匹配其当前高度：

$(document).ready(function() {
    $('.myClass').each(function() {
        $(this).css('min-width', $(this).css('height'));
    });
});

2.仅 CSS 方法（长宽比技巧）：

令人惊讶的是，无需 JavaScript 即可直接在 CSS 中实现所需的行为。关键是使用 元素：

.container {
    position: relative;
    display: inline-block;
    height: 50vh; /* Adjust this based on desired height */
}

.container > img {
    height: 100%; /* Inherits container's height */
}

.contents {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

元素将自动缩放其宽度以保持其固有的纵横比 1:1。这意味着 的宽度并且它包含的元素 () 将始终等于容器的高度。

自定义：

要自定义宽高比，请调整 的高度元素。例如，要创建 4:3 的宽高比，请将 设置为高度调整为 133%。

现场演示：

https://jsbin.com/koyuxuh/edit

替代方法（画布或 SVG）：

您还可以使用<画布>或 创建纵横比行为。原则保持不变。

以上是如何使用 CSS 使元素的最小宽度等于其动态高度？的详细内容。更多信息请关注PHP中文网其他相关文章！