設置項目的高度等於項目

的寬度我想設置一個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

設置項目的高度等於項目

回答

相關問題