CSS:高度=宽度(另一种情况)
问题描述:
我试图通过css制作相同的(先验未知)宽度和高度。CSS:高度=宽度(另一种情况)
.cont{height: 150px; width: 300px; background: lightgray;} /*size is unknow*/
.cont>div:nth-child(odd){background:pink;}
.cont>div:nth-child(even){background:green;}
.bordered{border:1px solid red;}
.square{
\t position: relative;
\t width: auto; \t \t /* desired width */
}
.square:before{
\t content: "";
\t display: block;
\t padding-top: 100%; \t /* initial ratio of 1:1*/
}
.square>div{
\t position: absolute;
\t top: 0;
\t left: 0;
\t bottom: 0;
\t right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont">
<div class="col-xs-4">a
<div class="square"><div class="bordered"><img src="http://lorempixel.com/125/100">red bordered SQUARE auto width does not work, content size is unknow!</div>
</div>
</div>
<div class="col-xs-4">b
</div>
<div class="col-xs-4">c
</div>
</div>
前提:
- 的广场的父母或他们的维度是未知的。
- 正方形或其尺寸的内容是未知的(我把一些图像与一些文本里面,只是为了给容器一些异构内容)。
- 所以我无法控制任何这些(父母或孩子),也不能修改它的属性。
- 我可以控制的唯一东西是元素或/和其直接(和唯一)子元素。
问题:如何实现其在这种情况下,一个CSS 方(红色边框的),而无需指定像素宽度(保持它的“自动”的内容)?
答
尝试使类<img>
标签的边界:
.cont{height: 300px; width: 500px; background: lightgray;}
.cont>div:nth-child(odd){background:pink;}
.cont>div:nth-child(even){background:green;}
.bordered{border:1px solid red;}
.square{
\t position: relative;
\t width: auto; \t \t /* desired width */
}
.square:before{
\t content: "";
\t display: block;
\t padding-top: 100%; \t /* initial ratio of 1:1*/
}
.square>div{
\t position: absolute;
\t top: 0;
\t left: 0;
\t bottom: 0;
\t right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont">
<div class="col-xs-4">a
<div class="square"><div><img class="bordered" src="http://lorempixel.com/125/100"></div></div></div>
<div class="col-xs-4">b
</div>
<div class="col-xs-4">c
</div>
</div>
我也改变了.cont
div的大小,使图像会合适。
目前还不清楚你在问什么。你的代码绝对不是你正面临的问题的一个完整的,最小的例子。 (请参阅https://*.com/help/mcve寻求帮助。) –
@AnthonyHilyard我在编辑中指定了该问题 – Serge