Сохранение изображения в контейнере div

Question

У меня есть простой макет и попытка сохранить изображение в div, но его выход из div в режиме полной ширины, есть способ изменить размер изображения, чтобы сохранить в div, я может обрабатывать использует фоновое изображение, но я думаю, что должен быть способ, чтобы сохранить в DIV с помощью изображения тег

Вот JSFiddle

header { 
 
float: left; 
 
width: 100%; 
 
height: 100px; 
 
background: #f00; 
 
box-sizing: border-box; 
 
padding: 10px 0; 
 
} 
 
header .header_left { 
 
float: left; 
 
width: 20%; 
 
} 
 
header .header_left > a > img { 
 
width: 100%; 
 
height: auto; 
 
} 
 
header .header_right { 
 
float: right; 
 
width: 20%; 
 
}

<header> 
 
    <div class="mcontainer"> 
 
    <div class="header_left"> <a href="javascript:;"><img src="https://cdn.img42.com/63de8c9048f1b98a226f926f5d9d56c5.jpeg" alt="Welcome"></a> </div> 
 
    <div class="header_right"> 
 
     <ul> 
 
     <li>Test/Test</li> 
 
     <li>Login</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header>

Answer 1

Ваш заголовок имеет фиксированную высоту 100px и верхнее и нижнее заполнение 10px. Так что ваш контент имеет высоту 80px, так просто добавьте max-height:80px; к изображению:

Кодекс (https://jsfiddle.net/y1hnyc3d/1/):

header { 
 
    float: left; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: #f00; 
 
    box-sizing: border-box; 
 
    padding: 10px 0; 
 
} 
 
header .header_left { 
 
    float: left; 
 
    width: 20%; 
 
} 
 
header .header_left > a > img { 
 
    width: 100%; 
 
    height: auto; 
 
    max-height:80px; 
 
} 
 
header .header_right { 
 
    float: right; 
 
    width: 20%; 
 
}

<header> 
 
    <div class="mcontainer"> 
 
    <div class="header_left"> <a href="javascript:;"><img src="https://cdn.img42.com/63de8c9048f1b98a226f926f5d9d56c5.jpeg" alt="Welcome"></a> </div> 
 
    <div class="header_right"> 
 
     <ul> 
 
     <li>Test/Test</li> 
 
     <li>Login</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header>