Crop image, not stretch it

Question

When I insert an image into a container with a fixed width and height, the image is stretched to fit that space. Is there a way to display the image in normal size, but are excessively cut out?

Answer 1

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

 img { object-fit: cover; } 

93% of browser sessions have supported this since 2018. - May 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.

Answer 3

You can use the CSS clip property:

 #image_element { position:absolute; clip:rect(0px,60px,200px,0px); } 

The disadvantage of using clip is that the element must be absolutely positioned and accessible only with the "rect" shape.

Cm:

• http://www.w3schools.com/CSS/pr_pos_clip.asp
• http://www.cssplay.co.uk/menu/clip_gallery

Answer 4

Show background image

Answer 5

Use this: http://www.w3schools.com/css/pr_background-position.asp

background-position: 5px 5px;

and then set the height and width of the div

height: 55px;

width: 55px;