MENU

纯CSS自适应九宫格图片格

2021 年 05 月 06 日 • 阅读: 246 • 技巧杂烩

前言

前些时间在开发SNS前端,需要写一个图片宫格,因为不想使用JS和做其他的判断,我就尽量用纯CSS写了一个自适应的图片九宫格。

截图

一张图片

一张图片

两张图片

两张图片

四张图片

四张图片

九张图片

九张图片

HTML代码

<div class="images-box">
    <a><img src="…"></img></a>
    <a><img src="…"></img></a>
    <!-- 更多 -->
</div>

样式代码

这里的样式我用SCSS写的。

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

|十年之约

本网站由提供CDN加速/云储存服务