纯 CSS 自适应九宫格图片格
HTML 代码
<div class="images-box">
<a><img src="…"></img></a>
<a><img src="…"></img></a>
<!-- 更多 -->
</div>
样式代码
.images-box {
padding: 0 0vw 2vw 0vw;
font-size: 0;
word-spacing: 0;
letter-spacing: 1vw;
line-height: 1vw;
a {
display: inline-block;
height: 30%;
width: 30%;
overflow: hidden;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
&:only-child {
height: initial;
width: initial;
max-width: 80%;
}
&:nth-child(1):nth-last-child(2) {
width: 45%;
height: 45%;
}
&:nth-child(2):nth-last-child(1) {
width: 45%;
height: 45%;
}
&:nth-child(1):nth-last-child(4) {
height: 45%;
width: 45%;
}
&:nth-child(2):nth-last-child(3) {
height: 45%;
width: 45%;
}
&:nth-child(3):nth-last-child(2) {
height: 45%;
width: 45%;
}
&:nth-child(4):nth-last-child(1){
height: 45%;
width: 45%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
Tags : 本文未设置标签
「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」
(๑>ڡ<)☆谢谢老板们的投食~
23元
使用微信扫描二维码完成支付

手机阅读
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!
关注微信公众号『丰烨地毯』
第一时间了解最新地毯信息
关注官微不迷路~
(OωO)