如何使用 CSS 设置元素的宽度与其高度成比例？-css教程-PHP中文网

如何使用 CSS 设置元素的宽度与其高度成比例？

Barbara Streisand

发布： 2024-12-15 14:14:18

原创

974 人浏览过

How Can I Set an Element's Width Proportionally to Its Height Using CSS?

使用 CSS 按高度调整元素宽度

根据高度设置元素宽度可以通过 jQuery 实现，如原始问题中所述。但是，可以使用 CSS 简化此过程。

要实现此目的，请利用替换元素的概念，例如如何使用 CSS 设置元素的宽度与其高度成比例？。当仅指定高度时，这些元素本质上会调整其宽度以保持其纵横比。

考虑以下示例：

.container {
  position: relative;
  display: inline-block;
  height: 50vh;
}

.container > img {
  height: 100%;
}

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

登录后复制

.container 元素的高度决定最小宽度。透明的如何使用 CSS 设置元素的宽度与其高度成比例？纵横比为 1:1 可确保 .container 及其子 .contents 元素的宽度始终与其高度成比例。

或者，要保持 .contents 的纵横比为 4:3，请设置 img 的高度达到133%。使用或如何使用 CSS 设置元素的宽度与其高度成比例？ ;也是可行的。

对于需要根据宽度调整元素高度的情况，请参考使用 CSS 保持宽高比的指南。

以上是如何使用 CSS 设置元素的宽度与其高度成比例？的详细内容。更多信息请关注PHP中文网其他相关文章！