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>