css固定幅の画像と高さの自動調整

Question

私はCSSで固定divを持っています幅：400px;高さ：280px;しかし、私のイメージは様々な次元から来ており、いくつかはポートレートの風景です。どのように私はフィット/ストレッチ/ divのサイズにソースサイズに関係なく私のイメージを埋めるのですか？

Answer 1

divに固定サイズの場合は、imgのheight/widthを100％に設定することができます。

div { 
 
    width: 150px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div> 
 
    <img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg"> 
 
</div>

あなたはdivを埋めるためにしたいが、あなたはまた、あなたが背景としてIMGを使用する場合background-size: coverに似ていますが、object-fit: coverを使用することができ、画像の縦横比を維持したい場合。

div { 
 
    width: 100px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<div> 
 
    <img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg"> 
 
</div>

Answer 2

私はヨーヨーがそれを行う最善の方法は、背景画像でそれを行うと思います。

HTML <div style="background-image: url("paper.gif"); background-size: cover; background-position: center;"></div>

それはJavascriptをせずにdiv要素にあなたのイメージを追加するための最良の方法です。

Answer 3

あなたは、コンテナ内の任意の画像に合わせて、この答えを確認することができますが https://stackoverflow.com/a/36063374/2894798 を中心にあなたのケースでは、コードはここに

.container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border: 1px solid; 
    width: 400px; /*customize to your needs 100%*/ 
    height: 280px; /*customize to your needs*/ 
} 
.container img 
{ 
max-width:100%; 
max-height:100%; 
} 

だろうジョルジ・parunovは単純ではあり@fiddle

Answer 4

です最良の方法。あなたが使用したい場合は、CSSを使って画像をdivに反応させることをお勧めします。

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