关于javascript：高度等于动态宽度（CSS流体布局）


Height equal to dynamic width (CSS fluid layout)

本问题已经有最佳答案，请猛点这里访问。

是否可以设置与宽度相同的高度(比率1:1)？

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

1
2
3
4
div {
  width: 80%;
  height: same-as-width
}
相关讨论

[最新消息：虽然我是独立发现这一诡计的，但从那时起我就知道蒂埃里·科布伦茨击败了我。你可以在单子上找到他的2009年文章。信用证到期。]

我知道这是一个老问题，但我遇到了一个类似的问题，我只是用CSS解决的。这是我的博客文章，讨论了解决方案。这篇文章中包含了一个活生生的例子。代码在下面重新发布。

HTML：

1
        some text

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#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! */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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! */
}
1
    some text

相关讨论

有一种使用CSS的方法！

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

1
2
3
4
5
6
.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

这在所有主要浏览器中都能很好地工作。

jfiddle:https://jsfiddle.net/ayb9nzj3/

相关讨论

没有任何javascript是可能的：)

本文完美地描述了它-http://www.mademyday.de/css-height-equals-width-with-pure-css.html

HTML：

1
    Aspect ratio of 1:1

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:    "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

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

/* Other ratios - just apply the desired class to the"box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}
相关讨论

简单和NEET：根据视区宽度，使用vw单位作为响应的高度/宽度。

vw : 1/100th of the width of the viewport. (Source MDN)

演示

HTML：

1
 

1:1纵横比的CSS:

1
2
3
4
div{
    width:80vw;
    height:80vw; /* same as width */
}

根据所需的纵横比和元素宽度计算高度的表。

1
2
3
4
5
6
   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

此技术允许您：

  • 不使用position:absolute;在元素中插入任何内容
  • 没有不必要的HTML标记(只有一个元素)
  • 使用VH单位根据视区高度调整元素纵横比
  • 您可以根据视区的高度和宽度制作始终适合视区的响应方形或其他纵横比(请参见此答案：根据视区的宽度和高度或此演示制作响应方形)

IE9+支持这些单元。有关详细信息，请参阅Canius。

相关讨论

使用jquery，您可以通过

1
2
var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

查看http://jsfiddle.net/n6dau/1上的工作示例/

相关讨论

非常简单的方法jsFiddle

HTML

1
        some text

CSS

1
2
3
4
5
6
7
8
#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}
相关讨论

在填充顶部/底部技术的基础上展开，可以使用伪元素来设置元素的高度。使用浮动和负边距从流和视图中删除伪元素。

这允许您在不使用额外的DIV和/或CSS定位的情况下将内容放入框中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.fixed-ar::before {
  content:"";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content:"";
  display: table;
  clear: both;
}


/* proportions */

.fixed-ar-1-1::before {
  padding-top: 100%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-16-9::before {
  padding-top: 56.25%;
}


/* demo */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}
1
2
3
1:1 Aspect Ratio
4:3 Aspect Ratio
16:9 Aspect Ratio

相关讨论

这真的是内森回答的一个评论，但我还不被允许这样做…我想保持纵横比，即使有太多的东西放在盒子里。他的例子扩展了高度，改变了纵横比。我发现添加

1
2
3
overflow: hidden;
overflow-x: auto;
overflow-y: auto;

对.元素有帮助。参见http://jsfiddle.net/b8fu8/3111/

宽度：80Vmin；高度：80Vmin；

CSS最小视图、高度或宽度的80%

http://canius.com/feat=视区单位