JavaScript高度等于动态宽度（CSS流体布局）

一尘不染

JavaScript高度等于动态宽度（CSS流体布局）

javascript

是否可以将宽度设置为相同的高度（比率1：1）？

例

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

CSS

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

阅读 465

2020-04-25

一尘不染

使用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

JavaScript高度等于动态宽度（CSS流体布局）

共3个答案