html – How to actually arrange images in CSS GRID?


I have an svg image (with the class content__img) has a default width of 760.7 and height of 687.08,
in the grid container there are 2 columns and 2 rows of “ `1fr“`, this image is found
in the first cell, and since the image size is bigger than the first row,
the image enlarges the height of the row:

enter image description here

taking this into account

1.- If I specify that the image has a height
from 100% the image does not fit the height of the first row
Why is this happening? Shouldn’t it be the size of the row at that moment?
Because with block type elements (and the other elements in general)
if they take the size of the current row, as far as I know, by default they take the width and height of the cell
(it also doesn’t work assigning display: block to the image)

HTML:

<body>
    <div class="content">
        <img class="content__img" src="../../assets/images/test.svg" alt="Test">
    </div>
</body>

CSS:

.content {
    width: 80%;
    height: 80%;

    background-color: beige;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.content__img {
    height: 100%;
}

2.- If I wrap the image in a container div
(with class content__img-box), this also doesn’t work, despite
that the div takes the width and height of 100% of the cell, therefore, if I set the height of the image to 100%, why does the image
doesn’t take the 100% from the div (content__img-box)?

HTML:

<body>
    <div class="content">
        <div class="content__img-box">
            <img class="content__img" src="../../assets/images/test.svg" alt="Test">
        </div>
    </div>
</body>

CSS:

.content {
    width: 80%;
    height: 80%;

    background-color: beige;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.content__img {
    height: 100%;
}

This is the result I want (obviously you can give a fixed or non-dynamic size to the row and that works, but the purpose is that the image is attacked if the grid container grows):

enter image description here



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here