纯 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的前端代码 目前正在纺织公司学习外贸方面的新人 欢迎各位朋友的交流学习!

  网易评论

思考中……

  近期评论

无论有多困难,都坚强地抬头挺胸,告诉所有人,你并非他们想象的那样不堪一击。

每个人心里都有一段伤痕,时间才是最好的疗剂。

人总是珍惜未得到的,而遗忘了所拥有的。

退一步,并不象征我认输;放手,并不表示我放弃;微笑,并不意味我快乐!

人海中再回首,朋友真诚依旧,生命里重逢,心境平和温柔,往事如风,岁月如歌,漫漫人生路,苍桑几许,幸福几何!