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

是否可以设置相同的高度和宽度(比例1:1)?

例子

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

CSS

div {
width: 80%;
height: same-as-width
}
650965 次浏览
小开
最佳答案

使用jQuery，您可以通过以下操作来实现这一点

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

检查工作示例在http://jsfiddle.net/n6DAu/1/

小开

[更新:虽然我是独立发现这个技巧的，但我后来发现蒂埃里Koblentz打败了我。你可以在A List Apart上找到他的2009篇文章。该表扬就表扬。]

我知道这是一个老问题，但我遇到过一个类似的问题，我做了仅用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! */
}
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>

小开

有一种使用CSS的方法!

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

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

这在所有主流浏览器中都运行良好。

JSFiddle: # EYZ0

小开
这确实是对Nathan的回答的一个评论，但我还不允许这样做 我想保持纵横比，即使盒子里有太多东西装不下。他的例子扩大了高度，改变了纵横比。我发现添加

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

对元素有帮助。看到# EYZ0

小开

这是可能的，没有任何Javascript:)

HTML:

<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>

CSS:

.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%;
}
小开

现在最好的方法:aspect-ratio属性(2022)

div {
aspect-ratio : 1 / 1;
width:50%;
border:1px solid red;
}
<div>Aspect ratio : 1 / 1</div>

Other method : use vw units for a responsive height/width according to the viewport width.

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

DEMO

HTML:

<div></div>

CSS用于1:1的纵横比:

div{
width:80vw;
height:80vw; /* same as width */
}

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

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

这个技巧可以让你:

  • 在元素中插入任何内容而不使用position:absolute;
  • 没有不必要的HTML标记(只有一个元素)
  • 根据视口的高度使用vh单位调整元素的纵横比
  • 你可以根据viewport的高度和宽度制作一个响应正方形或其他宽高比，总是适合viewport(参见这个答案:根据视口的宽度和高度响应正方形或这个演示)

这些单元由IE9+支持，见canIuse获取更多信息

小开
< p >宽度:80 vmin; 身高:80 vmin; < / p > < p > CSS 最小视图的80%，高度或宽度

http://caniuse.com/#feat=viewport-units

小开

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

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

.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;
}
<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

小开

极其简单的方法jsfiddle

超文本标记语言

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

CSS

#container {
width: 50%; /* desired width */
}


#element {
height: 0;
padding-bottom: 100%;
}

提交答案