纯 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;
        }
    }
}
Typecho赞赏功能

「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」

薇拉航线🌺

(๑>ڡ<)☆谢谢老板们的投食~

使用微信扫描二维码完成支付


文章二维码

手机阅读

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!


关注微信公众号『丰烨地毯』

第一时间了解最新地毯信息
关注官微不迷路~

  Previous post 放松心态面对一切
Next post   谈谈我的恋爱观

添加新评论

  关于博主

一个90后的国际货运专业毕业的学生 搭建网站纯粹是个人兴趣使然 偶尔会写一丢丢PHP和JS的前端代码 目前正在纺织公司学习外贸方面的新人 欢迎各位朋友的交流学习!

  网易评论

思考中……

  近期评论

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论你选择做什么,追求完美的程度决定你成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

现在站在什么地方不重要,重要的是你往什么方向移动。