Nur horizontal skalierende reagierende Bild

Question

Ich arbeite auf einer Website, und jetzt möchte ich ein Bild (img-Tag) nur horizontal skalieren. Es muss also immer die volle Höhe einnehmen. Und wenn Sie den Bildschirm anpassen, sollte er in der Mitte bleiben und die rechte und linke Seite beschneiden. Und ohne das Bild zu "strecken".

Ein Beispiel (es ist das große Bild links im Schieber):

http://reddle.nl/frankendael/beers/t-i-t-s/

Ich möchte immer der Lage sein, die volle Bierflasche anzuzeigen.

Answer 1

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

Answer 2

Versuchen Sie dies.

.vc_inner { 
    height: 100%; 
} 
.attachment-full { 
    height: 100%; 
    width: 100%; 
} 

, wenn Sie für alle Bildschirme passen wollen, verwenden Sie min-height oder max-height

Answer 3

Sie Ihr Bild in einem div mit width:100% und oveflow:hidden einbetten müssen. Ihr Bild muss seine Größe enthalten, auch die div muss mindestens die gleiche Höhe wie das Bild haben

Answer 4

Es gibt ein paar Möglichkeiten, dies zu erreichen. Da Sie nicht alle möglichen Details gegeben hat, oder einen Code, bin zu raten, ich nur, dass dies zu erreichen, was Sie wollen:

body { 
 
    margin: 0; padding: 0; 
 
} 
 

 
.container { 
 
    width: 40%; 
 
    height: 100vh; 
 
    
 
    overflow: hidden; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    
 
    /* just to show the container for testing */ 
 
    box-shadow: 2px 2px black; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<div class='container'> 
 
    <img src='https://source.unsplash.com/random/800x1000/daily'> 
 
</div>

ich dies mit Flex-Box zu tun wählte, indem Sie dem Container die volle Höhe geben, seinen Inhalt (das Bild) in der Mitte/Mitte anzeigen und dem Bild eine Höhe von 100% geben. Dies schneidet die Seiten aus, wenn die Box zu klein ist, und fügt Leerraum hinzu, wenn die Box zu groß ist.

Sie können eine Live-Version at this CodePen sehen. Es gibt andere Möglichkeiten, es zu tun, aber dieses ist ziemlich sauber und gut unterstützt.

Viel Glück!, Und wenn dies nicht das ist, was Sie wollten, bitte aktualisieren Sie Ihre Frage, um klarer zu sein.