Crop an image instead of stretching it

Question

When I insert an image in a container with fixed width and height, the image stretches to fit that space. Is there a way to display the image at its normal size, but with the excess clipped out?

Answer 1

The modern way is to use object-fit: none; (or the more common object-fit: cover; if you want to scale, but without stretching).

img {
    object-fit: cover;
}

93% of browser sessions support this as of 2018 March. — Can I use?

Answer 2

<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>

Then in the above DIV you can play with CSS

• width/height
• background-position

to create different crop effects.