如何devise一个div作为响应式广场？
我希望我的div适应其高度始终等于它的宽度。 宽度是百分比。 当父母的宽度减less时，盒子应该保持其纵横比减less。
如何做到这一点是CSS？
要达到您要查找的内容，您可以使用视口百分比长度 vw 。
这里是我在jsfiddle上做的一个简单例子。
HTML：
<div class="square"> <h1>This is a Square</h1> </div>
CSS：
.square { background: #000; width: 50vw; height: 50vw; } .square h1 { color: #fff; }
我相信还有很多其他的方法可以做到这一点，但这种方式对我来说似乎是最好的。
适用于几乎所有的浏览器。
你可以尝试给百分比padding-bottom 。
<div style="height:0;width:20%;padding-bottom:20%;background-color:red"> <div> Content goes here </div> </div>
外部的div做一个正方形，内部的div包含内容。 这个解决scheme为我工作了很多次。
这是一个jsfiddle
这与指定与宽度百分比相同的填充底部一样简单。 所以如果你有一个50％的宽度，只需使用下面的这个例子
id or class{ width: 50%; padding-bottom: 50%; }
这是一个jsfiddle http://jsfiddle.net/kJL3u/2/
带有响应式文本的编辑版本 ： http : //jsfiddle.net/kJL3u/394
HTML
<div class='square-box'> <div class='square-content'> <h3>test</h3> </div> </div>
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; }
这是我想出来的。 这是一个小提琴 。
首先，我需要三个正方形和居中文本的包装元素。
<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>
这是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; }
另一种方法是使用透明的1×1.png， width: 100% ， height: auto在一个div和绝对定位的内容：
HTML：
<div> <img src="1x1px.png"> <h1>FOO</h1> </div>
CSS：
div { position: relative; width: 50%; } img { width: 100%; height: auto; } h1 { position: absolute; top: 10px; left: 10px; }
Fidle： http : //jsfiddle.net/t529bjwc/
