ul中的li设置等宽高css

2021-03-29 10:25

阅读:479

标签:图片   代码   code   pad   lock   color   over   设置   add   

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

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

关键词:VW / VH

vw:视窗的宽度

vh:视窗的高度

思路:根据vw获取视图宽度从而设置li的宽度等于高度

代码:


  • Sponge material

  •   设置:

    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

    标签:图片   代码   code   pad   lock   color   over   设置   add   

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


    评论


    亲,登录后才可以留言!