スケールとトリミング画像の最大幅

Question

サイズの大きなソース画像を取得し、高さを400pxにスケールダウンし、今度は300pxの中間に切り抜き、ウェブページに表示したいと考えています。この風景元画像に対して

：

https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg

完全にこのcode作品：

HTML

<div class="myscaled" style="background-image: url('https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg');</div> 

CSS

.myscaled { 
    display: inline-block; 
    width: 300px; 
    height: 400px; 
    background-position: center center; 
    background-size: cover; 
    border-radius: 10px; 
} 

しかし、この肖像ソース画像に対して：

https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAAFrAAAAJGE4YTQ0ZThjLWRkM2MtNGM1OS1iNGMwLTZiZjliYmRkZTY2Nw.jpg

同じjsfiddle作物上部と下部：それはトリミングですので、3：

Iは、高さ対幅の比が4以上であるので、それがだと思います高さは300の幅を与えます。その場合、私が望むのは、すべての高さを保持し、そこにある幅を表示するだけです。だから基本的に私は高さを400、最大幅を300にします。

どのように私はこれを行うことができますか？たぶん固定サイズのdivの中に画像をトラップし、余分な画像をこぼさないようにしますか？

EDITは、私はまた、撮りために正常に動作しますthis solutionを、試してみたが、私は風景の特大幅がコンテナのdivに中央に取得することはできません。

HTML

<div class="mydiv"> 
<img class="myimg" src="https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg"></div> 

CSS

.myimg { 
    height:400px; 
} 

.mydiv { 
    overflow:hidden; 
    text-align:center; 
    margin: auto; 
    width: 300px; 
    height: 400px; 
    border: 3px solid #73AD21; 
} 

Answer 1

あなたはbackground-size: contain;を使用することができ、多分それが役立つはずです。