CSS: Höhe = Breite (ein anderer Fall)

Question

Ich versuche, via CSS die gleiche (a priori unknow) Breite und Höhe.

Es gibt mehrere Möglichkeiten, es zu tun (1, 2), aber jede nicht in meinem Fall nicht funktioniert:

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

Voraussetzungen:

• Die Eltern des Platzes oder ihre Dimensionen sind unbekannt.
• Der Inhalt des Quadrats oder seine Abmessungen sind unbekannt (ich habe ein Bild mit Text eingefügt, um dem Container einen heterogenen Inhalt zu geben).
• So kann ich keine von diesen (Eltern oder Kinder) kontrollieren, noch seine Eigenschaften ändern.
• Das einzige, was ich steuern kann, ist das .square Element oder/und seine unmittelbare (und einzigartige) Kind.

Frage: Wie ein CSS Quadrat (rot umrandet) in diesem Fall zu erreichen ist, ohne die Breite in Pixel angeben zu müssen (hält sie „auto“ nach Inhalt)?

Answer 1

Ich habe die IMG innerhalb der quadrierten Klasse aufgerufen, um die Abmessungen des Containers anzupassen. Nur zwei Anpassung, eine mit der CSS für das img-Element:

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

und ich eingestellt, um die Höhe des lorempixel Bildes, das Sie anfordern.

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

Schauen Sie sich diese jsfiddle

Answer 2

versuchen machen die Klasse des <img> Tag begrenzt:

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

ich auch die Größe des .cont div so das Bild geändert wird passen.