Sanjeev K Sanjeev K - 1 month ago 8
CSS Question

Keeping image within the div container

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"> <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

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"> <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>

Comments