如何将图像调整为 css 网格

Question

我正在尝试将图像调整为 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>

Answer 1

好的，所以我实际上忘记提交了...但是当我这样做的时候，我想出了如何真正做到这一点。

解决办法是让每个cell(with background-position 100%)的背景图片为你要拉伸的图片，并且让grid的宽高比和宽高比一样图片。像这样：

#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>

Answer 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>

如何将图像调整为 css 网格

How to resize an image to a css-grid

css

css-grid