首页 > Web开发 > 详细

ul中的li设置等宽高css

时间:2020-03-31 22:18:36      阅读:220      评论:0      收藏:0      [点我收藏+]

响应式布局中宽度与高度相同

纯css方法设置ul中li宽高相等

关键词: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的高度

技术分享图片

 

ul中的li设置等宽高css

原文:https://www.cnblogs.com/chalkbox/p/12608959.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!