固定サイズのリサイズ画像のコンテナ

Question

divコンテナを使用して縮小した画像があります。残念なことに、コンテナはイメージのフルサイズの幅を調整します（コードペインの黒い背景として表示されます）。コンテナを含むイメージに合わせるにはどうしたらいいですか？

https://codepen.io/anon/pen/MreNBJ

.container { 
 
    height: 30px; 
 
    background: black; 
 
} 
 

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

<div class="container"> 
 
    <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg"> 
 
</div>

Answer 1

コンテナdisplay:inline-blockを作成し、それが内容の幅に崩壊します。

は

.container { 
 
    height: 30px; 
 
    background: black; 
 
    display: inline-block; 
 
} 
 

 
img { 
 
    height: 100%; 
 
    width: auto 
 
}

<div class="container"> 
 
    <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" /> 
 
</div>

Answer 2

これは、あなたが探しているものですか？

.container { 
 
    height: 30px; 
 
    background: black; 
 
    display: inline-block; 
 
} 
 

 
img { 
 
    height: 100%; 
 
    width: auto 
 
}

<div class="container"> 
 
    <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" /> 
 
</div>

Answer 3

あなたはdisplay: inline-flexとして.containerを設定することができます。

.container { 
 
    display: inline-flex; 
 
    height: 30px; 
 
    background: black; 
 
} 
 

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

<div class="container"> 
 
    <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg"> 
 
</div>