ul中的li設置等寬高css

響應式布局中寬度與高度相同

純css方法設置ul中li寬高相等

關鍵詞：VW / VH

vw：視窗的寬度

vh：視窗的高度

思路：根據vw獲取視圖寬度從而設置li的寬度等於高度

代碼：

<li>
  <div class="test">
       <img src="../images/hm1.png" alt="">
       <div>
         <h3>Sponge material</h3>
       </div>
  </div>
</li>               

　　設置：

li中的第一個盒子設置寬高用來撐起高度
.test: {
width: 18vw;
height 18vw;
margin: auto;
}

圖片設置一個高度，比外盒子小，易看
img {
padding-top: 3vw;
height 12vw;
margin: auto;
}

這里的test用來觸發背景顯示
.test:hover {
border-radius: 50%;
background-color: #c3dfff;
}

 

注意：vw和vh有兼容性，支持IE9+，IE9以下還是用JS去獲取寬度吧

上一張效果圖：

淺藍色背景是 .test  ，里面放了一張圖片，圖片設置了高度。高度小於li的高度