设置项目的高度等于项目

的宽度我想设置一个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>

来源

2017-06-12 maudulus

有趣的选择：https://stackoverflow.com/questions/19068070/how-to-style-a-div-to-be-a-responsive-square根据需要（你可以使用20vw，33vw等。） – deebs

如果你希望它是像素完美（高度相同，宽度相同），你可以使用这个公式：

.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/。这里

来源

2017-06-12 19:40:58 kochai

设置项目的高度等于项目

回答

相关问题