アイテムの高さをアイテムの幅と同じに設定する

Question

divの高さをdivの幅と同じに設定したいとします。トリッキーなことは、反応するのでdivの幅が設定されていないことです。私は私が目指しているものの写真を添付し​​ました。私はこのためにCSSを使用したいと思います。

<ion-grid> 
    <ion-row> 
     <ion-col> 
     <ion-icon name="add"></ion-icon> 
     <h3>SIDE</h3> 
     </ion-col> 
     <ion-col> 
     <ion-icon name="add"></ion-icon> 
     <h3>FRONT</h3> 
     </ion-col> 
    </ion-row> 
    <ion-row> 
     <ion-col> 
     <ion-icon name="add" ></ion-icon> 
     <h3>TOP</h3> 
     </ion-col> 
     <ion-col> 
     <ion-icon name="add" ></ion-icon> 
     <h3>SEAT</h3> 
     </ion-col> 
    </ion-row>  
    </ion-grid> 

Answer 1

あなたはそれが完璧なピクセル（同じ高さ、同じ幅）になりたい場合は、この式を使用できます。その中の

.stretchy-wrapper { 
    width: 100%; 
    padding-bottom: 100%; /* 1:1 */ 
    position: relative; 
} 

を：

.container-div { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
} 

ここにjsフィドルがあります：https://jsfiddle.net/a2j4sv2n/3/。