Avoid an image to go outside a div?

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?

---

You need overflow:hidden see an example here:

http://www.jsfiddle.net/S8qAq/

Read about overflow: here W3Schools

Good luck!

---

Try giving an overflow:hidden to the div.

---

add overflow:hidden; to your div style.

---

Use the overflow css property:

overflow: hidden;

---

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

---

use

overflow:hidden;

---

1. 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.

2. 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>