CSS：Height = Width（別のケース）

Question

私はCSSを介して同じ（先験的に知られていない）WidthとHeightを作成しようとしています。

あり（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>

前提条件：

• は、正方形の親またはその寸法は不明である。
• 正方形またはその寸法の内容は不明です（私はいくつかの異種の内容をコンテナに与えるためにいくつかのテキストをイメージに入れています）。
• 私はこれら（親または子供）のいずれも制御することも、そのプロパティを変更することもできません。
• 私が制御できるのは、.square要素またはその即時（および一意の）子です。

質問：幅をピクセル単位で指定しなくても、その場合にはCSS 平方（赤ボーダー）を有する達成するための方法（内容により「自動」それを維持しますか）？

Answer 1

私は、二乗されたクラスの内側のimgをコンテナのサイズに合わせるように呼びました。 img要素のCSSを使用した2つの調整：

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

と私はあなたが要求しているlorempixelイメージの高さを調整しました。

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

境<img>タグのクラス作ってみるこのjsfiddle

Answer 2

をチェックアウト：私もイメージして.contのdivのサイズを変更し

.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>

をフィットします。