CSS：高度=宽度（另一种情况）

Question

我试图通过css制作相同的（先验未知）宽度和高度。

有做这件事（1，2）的多种方法，但任何没有我的情况下工作：

.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 方（红色边框的），而无需指定像素宽度（保持它的“自动”的内容）？

Answer 1

我已经调用了平方类内部的img以匹配它的容器的尺寸。只是两个调整，一个与CSS的IMG元素：

.square img{ 
    height:auto; 
    width:100%; 
} 

我调整了你请求的lorempixel图像的高度。

<img src="http://lorempixel.com/125/125"></div> 

看看这个jsfiddle

Answer 2

尝试使类<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的大小，使图像会合适。