Whats the best way to control image sizes using CSS Grid?

Question

Im getting very familiar with CSS grid. But its has a few perplexing issues of how to best set it up when you start trying to involve images and grid responsiveness.

For example - is it better to set the size of the images by going to img and giving it some pixels? or is it better to set your grid-temp-cols/rows to a pixel?

I usually set a grid container with col/rows on auto or 1fr unless doing something specific.

I have alot off issues with images overflowing their grid container when set to 100% and object fit doesnt really help. I know height auto is set to as small as possible.

Anyway - less rambling. I made a 50x50px box to contain and img. one in the main g-tc and then i set the height on the item...this seems redundant and i dont like having the height and width controlled in different place.

<main class="container">
        <div class="item item1">
            <img src="./images/svgexport-14.svg" alt="1">
        </div>
        <div class="item item2">
            <img src="./images/svgexport-15.svg" alt="2">
        </div>

main {
    border: 2px dashed var(--red);
    padding: 1rem;

    display: grid;
    grid-template-columns: repeat(6, 50px);
    place-items: center;
    gap: 1rem;
}

.item {
    border: 2px dashed var(--yellow);
    border-radius: 50%;
    padding: 0.5rem;
    height: 50px;
    width: 100%;

    display: grid;
    place-items: center;
} ```

so i'm basically asking for answers or research material so i can nail the best and most effective way to control my grid sizes, especially when it comes to making a perfect square for a image/svg. they are always off. 

Thanks. 

Answer 1

What about putting the image as background image via css into the div?

https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds

<main class="container">
    <div class="item item1 cover"></div>
    <div class="item item2 cover"></div>
</main>

CSS:

.item1 {
   background: url(./images/svgexport-14.svg);
}

.item2 {
   background: url(./images/svgexport-15.svg);
   
}

.cover {
    background-size: cover;
}