How to resize an image to a css-grid-CodePudding

I am trying to resize an image to a css grid. However, the image is not "stretching" to the grid cell. Any ideas how I can make this happen?

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

CodePudding user response：

You can archive this by using the image as background. What you already mentioned. But In your original code the problem was the selector. instead #img use only the img tag name for example.

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

CodePudding user response：

OK, so I had actually forgotten to submit this... but whilst I was doing this I worked out how to actually do it.

The solution is to make the image you want to stretch as a background image for each cell (with background-position 100%), and make the aspect ratio of the grid the same as the width and height of the image. Like so:

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

    <div >
    </div>

    <div >
    </div>

    <div >
    </div>
 </div>