Skalieren und Zuschneiden Bild max-width

Question

Ich möchte ein großes Quellbild beliebiger Abmessungen aufnehmen, die Höhe auf 400px skalieren, es auf die jetzt verkleinert 300px Breite skalieren und auf einer Webseite anzeigen.

Für dieses Bild Landschaft Quelle:

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

Diese code funktioniert perfekt:

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; 
} 

jedoch für dieses Bild Portrait Quelle:

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

Die gleichen jsfiddle Kulturen der oben und unten:

Ich denke, es ist, da die Höhe-Breite-Verhältnis von mehr als 4: 3 ist, so ist es Zuschneiden die Höhe, um eine Breite von 300 zu geben. Was ich in diesem Fall will, ist die ganze Höhe zu konservieren und nur anzuzeigen, welche Breite es gibt. Also im Grunde möchte ich die Höhe 400 und die maximale Breite 300 sein.

Irgendwelche Ideen, wie ich das tun kann? Vielleicht falle das Bild in eine feste Größe Div und lassen Sie das zusätzliche Bild auslaufen?

EDIT

Ich habe auch versucht this solution, die für die portait funktioniert gut, aber ich kann die übergroße Weite der Landschaft in den Container div zum Zentrum nicht bekommen.

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

Sie background-size: contain; verwenden können, vielleicht sollte es helfen.