Positioning an image inside a block?

Question

css

I use bootstrap and flex blocks to create a grid of goods for an online store. It is necessary to properly process images so that they fit into a block with a certain height. And all the images are very different, from the phone to the refrigerator).
So far I have only such a code (for the image)

<div class="img-block">
     <img href="something.img" />
</div>

Answer 1

I would venture to suggest, perhaps not the best, but a quick and almost hassle-free option using background-image

<div class="img-block"  style="background-image: url(something.img)">
     <img href="something.img" />
</div>

Basically, we have this:

<div class="img-block"  style="background-image: url(something.img)">
</div>

.img-block {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.img-block img {
    opacity: 0;
}

Hide the IMG , show background-image instead .
Pros: cross-browser compatibility, easy editing of the code, no preparation of illustrations required
Cons: clogging of the code, although if the SEO is not so important and the block sizes are set, then <img>you can completely delete it.
example https://codepen.io/tolfy/pen/MGVbwJ

Answer 2

img {
  width: 100%;
  height: 100%;
  object-fit: cover; // contain
}

You can't do anything else with your pictures.

Answer 3

If the Aspect Ratio is different (aspect ratio 1:1, 3:2, 8:5 etc) then I think the robots will not help you in this case, when the product cards must be the same size - only handmade, customized by hand, or by hiring a designer and content manager

Answer 4

if for an online store, then it’s better not to use flex, but use css grid