实现一个九宫格 | 涛涛小站

背景

看到微信朋友圈这种九宫格排版挺有意思的~

padding-top

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding-top</title>
    <style>
        .square-image {
            position: relative;
            width: 100%;
            /* 相对父元素宽度的百分比 */
            padding-top: 100%;
        }

        .square-image img {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="square-image">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
    </div>
</body>

</html>

值得注意的是 padding-top 的百分比，是相对于其父元素的宽度而言，并非当前元素。

aspect-ratio

借助 aspect-ratio 可以十分简单的实现宽高比例，且不再需要一个外层的 div。

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aspect-ratio</title>
    <style>
        img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
</body>

</html>

附：兼容性查询

九宫格实现

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid + aspect-ratio</title>
    <style>
        .grid {
            width: 100%;
            max-width: 800px;
            display: grid;
            /* 三列，列宽相等 */
            grid-template-columns: repeat(3, 1fr);
            /* 网格间距 */
            gap: 4px;
            background-color: #f0f0f0;
        }

        .grid img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="grid">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
        <img src="http://media.caojiantao.site:1024/blog/6ce2c40e-1d29-4770-b1db-2ee13d374bfe.jpg" alt="">
    </div>
</body>

</html>

背景 ​

padding-top ​

aspect-ratio ​

九宫格实现 ​

参考 ​

背景

padding-top

aspect-ratio

九宫格实现

参考