CSS 如何将 div 样式设置为响应式正方形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19068070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style a div to be a responsive square?
提问by danijar
I want my div to adapt its height to always equal its width. The width is percental. When the parent's width decreases, the box should decrease by keeping its aspect ratio.
我希望我的 div 使其高度始终等于其宽度。宽度是百分比。当父级的宽度减小时，框应该通过保持其纵横比来减小。
How to do this is CSS?
这是CSS怎么做的？
回答by rahulbehl
Works on almost all browsers.
适用于几乎所有浏览器。
You can try giving padding-bottomas a percentage.
您可以尝试padding-bottom按百分比给予。
<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>
The outer div is making a square and inner div contains the content. This solution worked for me many times.
外部 div 正在制作一个正方形，内部 div 包含内容。这个解决方案对我有用很多次。
Here's a jsfiddle
这是一个jsfiddle
回答by Daniel Burkhart
To achieve what you are looking for you can use the viewport-percentage lengthvw.
要实现您正在寻找的内容，您可以使用viewport-percentage lengthvw。
Here is a quick example I made on jsfiddle.
这是我在jsfiddle 上制作的一个快速示例。
HTML:
HTML：
<div class="square">
<h1>This is a Square</h1>
</div>
CSS:
CSS：
.square {
background: #000;
width: 50vw;
height: 50vw;
}
.square h1 {
color: #fff;
}
I am sure there are many other ways to do this but this way seemed the best to me.
我相信还有很多其他方法可以做到这一点，但这种方式对我来说似乎是最好的。
回答by gidzior
HTML
HTML
<div class='square-box'>
<div class='square-content'>
<h3>test</h3>
</div>
</div>
CSS
CSS
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
text-align: center;
}
回答by Chipe
It is as easy as specifying a padding bottom the same size as the width in percent. So if you have a width of 50%, just use this example below
它就像指定与宽度相同大小的填充底部（以百分比为单位）一样简单。因此，如果您的宽度为 50%，请使用下面的示例
id or class{
width: 50%;
padding-bottom: 50%;
}
Here is a jsfiddle http://jsfiddle.net/kJL3u/2/
这是一个 jsfiddle http://jsfiddle.net/kJL3u/2/
Edited version with responsive text: http://jsfiddle.net/kJL3u/394
带有响应文本的编辑版本：http: //jsfiddle.net/kJL3u/394
回答by gskalinskii
Another way is to use a transparent 1x1.png with width: 100%, height: autoin a divand absolutely positioned content within it:
另一种方法是使用透明的 1x1.png 和width: 100%,height: auto在其中div绝对定位的内容：
html:
html：
<div>
<img src="1x1px.png">
<h1>FOO</h1>
</div>
css:
css：
div {
position: relative;
width: 50%;
}
img {
width: 100%;
height: auto;
}
h1 {
position: absolute;
top: 10px;
left: 10px;
}
回答by danijar
This is what I came up with. Here is a fiddle.
这就是我想出的。这是一个小提琴。
First, I need three wrapper elements for both a square shape and centered text.
首先，我需要三个包装元素用于方形和居中文本。
<div><div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</div></div></div>
This is the stylecheet. It makes use of two techniques, one for square shapesand one for centered text.
这是stylecheet。它使用了两种技术，一种用于方形，一种用于居中文本。
body > div {
position:relative;
height:0;
width:50%; padding-bottom:50%;
}
body > div > div {
position:absolute; top:0;
height:100%; width:100%;
display:table;
border:1px solid #000;
margin:1em;
}
body > div > div > div{
display:table-cell;
vertical-align:middle; text-align:center;
padding:1em;
}
