Keeping image within the div container - html

Question

I have a simple layout and trying to keep the image within the div, but its going out of the div in full width mode, is there a way to resize image to keep within the div, I can handle is using background image but I think there must be a way to keep within the div using image tag
Here is the 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"> <img src="https://cdn.img42.com/63de8c9048f1b98a226f926f5d9d56c5.jpeg" alt="Welcome"> </div>
<div class="header_right">
<ul>
<li>Test/Test</li>
<li>Login</li>
</ul>
</div>
</div>
</header>

Answer 1

Your header has a fixed height of 100px and a top and bottom padding of 10px. So your content has a height of 80px, so simply add max-height:80px; to your image:
The Code (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"> <img src="https://cdn.img42.com/63de8c9048f1b98a226f926f5d9d56c5.jpeg" alt="Welcome"> </div>
<div class="header_right">
<ul>
<li>Test/Test</li>
<li>Login</li>
</ul>
</div>
</div>
</header>