How to resize an image on output?

Question

css

Images of the product are displayed, all of them with different heights and widths. How can I make the pictures automatically zoom in and become 250x250? and were not distorted. Adaptability would also be nice to keep

Answer 1

<div><img src=картинка.пнг></div>

div {
overflow: hidden;
width: 250px;
height: 250px;
}
img {
height:100%;
}

You can also make it a background, but then the search engines will not see it, which is bad

Answer 2

For such purposes, it is necessary not to adapt the layout to the image, but to adapt the image to the design.
We take all the pictures and crop them properly. We put
a script on loading images so that new pictures are also cropped.
This is the best and most logical way, although it is a bit labor intensive at first.