Avoid an image to go outside a div?

Question

I have:

<div style="height:15px">
    <img src="image" />
</div>

The image is bigger than 15px, so it's outside the div when you see it. How do I "crop" the image (show only the 15px port of it), only using css?

score 21 · Accepted Answer · edited May 16 '13 at 17:42

21

You need overflow:hidden see an example here:

Read about overflow: here W3Schools

Good luck!

edited May 16 '13 at 17:42

ghitesh

answered Dec 01 '10 at 20:20

Trufa

Not the first, but most complete answer, with a working example (I tested as well). Well done, thanks! – Somebody still uses you MS-DOS Dec 01 '10 at 20:31

score 6 · Answer 2 · answered Dec 01 '10 at 20:14

6

Try giving an overflow:hidden to the div.

answered Dec 01 '10 at 20:14

Etienne de Martel

score 3 · Answer 3 · answered Dec 01 '10 at 20:15

3

add overflow:hidden; to your div style.

answered Dec 01 '10 at 20:15

wajiw

score 2 · Answer 4 · answered Dec 01 '10 at 20:15

2

Use the overflow css property:

overflow: hidden;

answered Dec 01 '10 at 20:15

RabidFire

score 2 · Answer 5 · edited May 25 '17 at 01:51

2

I am surprised no one has suggested object-fit: cover;

edited May 25 '17 at 01:51

RBT

answered May 24 '17 at 22:21

Javaish

It could be because this has no IE support, according to MDN. – Eric Majerus Feb 19 '19 at 21:44

score 1 · Answer 6 · answered Dec 01 '10 at 20:15

1

use

overflow:hidden;

answered Dec 01 '10 at 20:15

Breezer

score 0 · Answer 7 · answered Nov 03 '21 at 17:39

overlow: hidden, object-fit: cover; and width: fit-content they come with their own hurdles. If you have more than one image, then these methods may not provide you with the best solution.
Instead, you can define parent element size and force children to fit inside accordingly with max-height and max-width

<div style="height:15px; width: 15px;">
    <img src="image" style="max-height:100%; max-width: 100%;">
</div>

7 Answers7