ul中的li设置等宽高css
2021-03-29 10:25
标签:图片 代码 code pad lock color over 设置 add 关键词:VW / VH vw:视窗的宽度 vh:视窗的高度 思路:根据vw获取视图宽度从而设置li的宽度等于高度 代码: 设置: 注意:vw和vh有兼容性,支持IE9+,IE9以下还是用JS去获取宽度吧 上一张效果图: 浅蓝色背景是 .test ,里面放了一张图片,图片设置了高度。高度小于li的高度 ul中的li设置等宽高css 标签:图片 代码 code pad lock color over 设置 add 原文地址:https://www.cnblogs.com/chalkbox/p/12608959.html响应式布局中宽度与高度相同
纯css方法设置ul中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;
}