Изображение переполненное советом div

Question

Я уверен, что это действительно легко, но я долго смотрел на эту проблему, и мой мозг пропал. У меня есть div, который затем имеет изображение внутри него. Кажется, что изображение просто переполняет границу div и сводит меня с ума. У меня есть изображение ниже, чтобы показать вам, что происходит вместе с css.

#avatar { 
 
    float: left; 
 
    width: 50%; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
} 
 

 
#avatar img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div id="avatar"> 
 
<img src="http://i.imgur.com/dkzoNCc.png"></div>

У меня есть границы на главном сНу #avatar просто так я могу увидеть весь размер дел. Все, что я хочу, - это масштабирование изображения до размера div. Если я устанавливаю высоту на 100%, она просто переходит в div, но при ее изменении она начинает переполнять div. Я хочу, чтобы изображение изменялось по ширине, а не по высоте.

Я пропустил что-то действительно простое здесь? Я не хочу использовать переполнение, скрытое на изображении, так как я просто верну его часть.

Спасибо всем

Answer 1

Попробуйте ниже CSS для img.

• использование height: 100%; для максимальной высоты
• display: block;margin: auto; для центрирования
• max-width: 100%;, чтобы соответствовать большие изображения

Пожалуйста, проверьте пример с большими и маленькими изображениями.

#avatar { 
 
    float: left; 
 
    width: 50%; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
} 
 
#avatar img { 
 
height: 100%; 
 
max-width: 100%; 
 
display: block; 
 
margin: auto; 
 
}

<div id="avatar"> 
 
    <img src="http://www.baraodasfestas.com.br/Assets/Produtos/SuperZoom/0431_MICKEY_635703672330071491.jpg" alt=""> 
 
</div> 
 
<div id="avatar"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png" alt=""> 
 
</div>

Answer 2

Просто добавьте:

#avatar img { 
    max-width: 100%; 
} 

Answer 3

Это из-за вашего height:auto для <img>

Просто используйте:

#avatar img 
{ 
    width: 100%; 
    height: 100%; 
} 

Но это будет растягиваться вам изображение. Поэтому, если вам нужно изображение полного размера внутри вашего контейнера, вам нужно растянуть контейнер. Как

#avatar 
{ 
    float: left; 
    display: inline-block; 
    width: 50%; 
    height: auto; 
    border: 1px solid black; 
} 

#avatar img 
{ 
    width: 100%; 
    height: 100%; 
} 

Answer 4

#avatar { 
 
    float: left; 
 
    width: 50%; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
} 
 

 
#avatar img { 
 
    /*width: 100%;*/ 
 
    height: auto; 
 
    max-width: 100%; 
 
    height:100%; 
 
}

<div id="avatar"> 
 
<img src="http://i.imgur.com/dkzoNCc.png"></div>