ul中的li设置等宽高css

最新推荐文章于 2024-10-11 17:25:10 发布

原创最新推荐文章于 2024-10-11 17:25:10 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #tensorflow #前端 #人工智能 #python

本文介绍如何使用纯CSS实现响应式布局中元素的宽高相等，利用vw单位根据视窗宽度调整li元素尺寸，适用于现代浏览器，IE9及以下版本建议使用JS替代。

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

纯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;
}