之前项目有个需求,要求前端画出下图的样式
样式布局好说,flex用就是了。
正方体的容器(使用百分比),里面套一个图片
html:
//使用react
<div className={style.item_img}>
<img src={system} className={style.item_img_icon} />
</div>
css:
//使用less
.item_img {
width: 10%;
height: 0;
padding-bottom: 10%;
display: flex;
justify-content: center;
align-items: center;
.item_img_icon {
margin-top: 100%;
width: 50%;
}
}