如何将div样式化为响应式正方形？
如何将div样式化为响应式正方形？
提问于 2013-09-28 22:37:03
我想让我的div调整它的高度，使其始终等于宽度。宽度是有意义的。当父对象的宽度减小时，长方体应该通过保持其纵横比来减小。
CSS是怎么做的？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-09-28 23:28:49
几乎可以在所有浏览器上运行。
您可以尝试以百分比形式给出padding-bottom。
<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>外部div是一个正方形，内部div包含内容。这个解决方案多次对我起作用。
这是一个jsfiddle
Stack Overflow用户
发布于 2015-03-11 19:29:33
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;
}Stack Overflow用户
发布于 2015-02-02 19:31:18
另一种方法是将透明的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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19068070
复制相关文章
相似问题