如何设计div作为响应方块？

Question

我希望我的div能够调整其高度以始终等于其宽度.宽度是百分比.当父级的宽度减小时,框应该通过保持其宽高比来减少.

怎么做是CSS？

Answer 1

适用于几乎所有浏览器.

您可以尝试padding-bottom按百分比给出.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

外部div正在制作正方形,而内部div包含内容.这个解决方案很多次对我有用.

这是一个jsfiddle

Answer 2

要实现您的目标,您可以使用视口百分比长度 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;
}

我相信还有很多其他方法可以做到这一点,但这种方式对我来说似乎是最好的.

Answer 3

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;
}

http://jsfiddle.net/38Tnx/1425/

Answer 4

它就像指定填充底部一样容易,宽度与百分比相同.因此,如果宽度为50%,请使用下面的示例

id or class{
    width: 50%;
    padding-bottom: 50%;
}

这是一个jsfiddle http://jsfiddle.net/kJL3u/2/

带有响应文本的编辑版本:http://jsfiddle.net/kJL3u/394

Answer 5

另一种方法是使用一个透明1x1.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/