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