画像の高さをコンテナの高さに設定し、アスペクト比を維持する

Question

アスペクト比を維持しながら画像の高さをコンテナの高さに設定する方法はありますか？それは多くの要求のように聞こえるが、確かに方法がある。つまり、画像の高さ全体を表示したいのですが、幅がコンテナの幅より広い場合（ブートストラップグリッドシステムを使用）、オーバーフロー：隠れてしまいます。私は高さが100％に設定されているように見えますが、写真は横から溢れて切り取られるのではなく、容器の内側に収まるように盛り上がっています。幅を100％に設定すると、コンテナが満たされます。私はそれが写真のアスペクト比ではなく、100％のための標準としてコンテナを使用していると信じています。それは私がする必要があることです。

この

は、私が起こっているものです：

<div style="width:150px; height:150px; display:flex; flex-direction:column"> 
 
    <img src="http://i.imgur.com/RiX7XfW.jpg" alt="Banana" style="height:100%;width:auto;overflow:hidden"> 
 
</div>

TL; DRは、私は、コンテナの高さまでの高さをロックし、画像の過剰を聞かせて、画像の縦横比を維持するために必要なだけオーバーフローして隠されて、コンテナをいっぱいにしながら、可能な限り最大限の画像を見ることができます。

どのディメンションが小さいかを計算し、それを関連するコンテナディメンションにロックする方法がある場合は、ボーナスポイントが表示されます。

Answer 1

の代わりに埋め込みます画像にimgタグを付けると、画像をコンテナの背景画像として設定できます。 background-size:cover;とbackground-position:center center;の組み合わせを使用すると、元の画像の縦横比を維持したまま、画像をコンテナの高さに一致させることができます。 background-positionプロパティは、左右の辺が切り取られるように画像を中央に配置します。カバー; `と：

<div style="background:url('http://i.imgur.com/RiX7XfW.jpg') center center/cover no-repeat; width:150px; height:150px; display:flex; flex-direction:column"></div>

Answer 2

イメージタグを使用している場合、これを行うことは容易ではないが、CSSの背景画像のプロパティ（またはショートカットbackground）を使用している場合、その後、

#wrap{width:300px;height:200px;margin:50px;overflow:hidden;} 
 
    #imgDiv{width:1000px;height:1000px;background-image:url(http://placekitten.com/900/900); background-size:cover;}

<div id="wrap"> 
 
    <div id="imgDiv"> 
 
    </div> 
 
</div>