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的大小，使圖像會合適。