Search code examples
csscss-grid

How to resize an image to a css-grid

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>

Solution

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