How to properly display photos in a 100x100px container without deformation if they are all different sizes?

Question

css

Tell me, let's say there is a div with dimensions of 100x100px, different pictures with different sizes. If you simply display them and specify the size 100x100, they are deformed. And how to make them so that their width is stretched to 100 pixels, but the height is cut off (like cropped)?

Just as an example:

<div style="width:100px;height:100px">
<img src="...">
</div>

Answer 1

useobject-fit: cover;