标签：图片 代码 code pad lock color over 设置 add
关键词：VW / VH
vw：视窗的宽度
vh：视窗的高度
思路：根据vw获取视图宽度从而设置li的宽度等于高度
代码：
<li>
<div class="test">
<img src="../images/hm1.png" >
<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的高度
标签：图片 代码 code pad lock color over 设置 add
原文地址：https://www.cnblogs.com/chalkbox/p/12608959.html
