画像をdiv内に伸ばしずに合わせる

Question

画像を伸ばしずに画像を300x300 divに収める必要があります。私は、ハフポストにこのページのスライダーを、これを見てきました：

http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html

画像が切り取られているが、伸びません。 max-width、max-heightの代わりにmax-widthを使用します。

どうすればよいですか？

Answer 1

あなたがリンクしているサイトの画像は実際のサイズなので、画像のサイズを変更するだけです。

イメージが300px幅または高さよりも小さくなった場合、画像を「伸ばす」ことなく実際に行うことはできませんが、比率を変更せずに行うことができます。

ここで基本的な考え方です：

<div><img></div> 

は、あなたが最小幅（あなたがより大きくする必要が小さな画像を期待する）として300ピクセルを使用したい場合は、これを試してみてください。

div { 
    width:300px; 
    height:300px;  
    overflow:hidden; 
} 
div img { 
    min-width:100%; 
} 

デモ：http://jsfiddle.net/Z47JT/

イメージをクリップする場合（大きいと思われるので）、拡大しない場合は、これを試してください：

div { 
    width:300px; 
    height:300px;  
    overflow:hidden; 
    position:relative; 
} 
div img { 
    position:absolute; 
} 

デモ：http://jsfiddle.net/Z47JT/1/

したい場合は、これらの技術の両方を組み合わせます。

もう1つの方法は、代わりにbackground-imageをコンテナに使用することですが、完全にサポートされていないbackground-sizeを使用しない限り、サイズを変更することはできません。それ以外の場合は、簡単に解決できます。

Answer 2

はここでフレックスボックスソリューションに

を使用

<div><img /></div> 

が

div{ 
    width:100%; 
    height:250px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    overflow:hidden 
} 
div img{ 
    flex-shrink:0; 
    -webkit-flex-shrink: 0; 
    max-width:70%; 
    max-height:90%; 
}