代码之家 › 专栏 › 技术社区 › Chris Sherlock

如何将图像调整为css网格

css-grid css

Chris Sherlock · 技术社区 · 2 年前

我正在尝试将图像调整为css网格。然而,图像并没有“拉伸”到网格单元。你知道我该怎么做吗?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test 4x4 responsive grid</title>
        <style>

        #grid-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            aspect-ratio: 16 / 9;
        }

        #picture {
            width: 100%;
            height: 100%;
        }

        #img {
            width: 100%;
            height: 100%;
        }
        </style>
    </head>

    <body>
        <div id="grid-wrapper">
            <div id="picture">
                <picture>
                    <source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
                    <img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
                </picture>
            </div>

            <div>
                <picture>
                    <source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
                    <img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
                </picture>
            </div>

            <div>
                <picture>
                    <source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
                    <img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
                </picture>
            </div>

            <div>
                <picture>
                    <source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
                    <img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
                </picture>
            </div>
        </div>
    </body>
</html>

2 回复 | 直到 2 年前

Maik Lowrey 2 年前

你可以用图像作为背景来存档。你刚才提到的。但在你最初的代码中,问题在于选择器。相反#例如,img只使用img标签名。

        #grid-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            aspect-ratio: 16 / 9;
        }


        img {
            width: 50%;
            height: 50%;
        }

        <div id="grid-wrapper">
            <div id="picture">
                <picture>
                    <source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
                    <img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
                </picture>
            </div>

            <div>
                <picture>
                    <source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
                    <img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
                </picture>
            </div>

            <div>
                <picture>
                    <source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
                    <img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
                </picture>
            </div>

            <div>
                <picture>
                    <source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
                    <img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
                </picture>
            </div>
        </div>
    </body>
</html>

Chris Sherlock 2 年前

好的,所以我实际上忘了提交这个。。。但在我做这件事的时候,我想出了实际的方法。

解决方案是将要拉伸的图像作为每个单元的背景图像(背景位置为100%),并使网格的纵横比与图像的宽度和高度相同。就像这样:

#grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 845 / 555;
}

.image {
    object-fit: contain;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100% 100%;
}

<div id="grid-wrapper">
    <div class="image">
    </div>

    <div class="image">
    </div>

    <div class="image">
    </div>

    <div class="image">
    </div>
 </div>