小编典典

JavaScript高度等于动态宽度(CSS流体布局)

javascript

是否可以将宽度设置为相同的高度(比率1:1)?

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

阅读 572

收藏
2020-04-25

共3个答案

小编典典

使用jQuery,您可以通过以下方式实现此目的

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});
2020-04-25
小编典典

有一种使用CSS的方法!

如果你根据父容器设置宽度,则可以将高度设置为0,并将padding-bottom设置为将根据当前宽度计算的百分比:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

这在所有主流浏览器中都可以正常运行。

2020-04-25
小编典典

HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS:

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}
2020-04-25