imagebox in html Auto ausrichtet das Bild

Question

Ich habe dieses imagebox, die ein Benutzerhochgeladenes Bild angezeigt werden:

<img src = "./imgs/..imagenamehere..." style = "background-size:cover; width:357px; height:357px;" 

ich die background-size:cover dort platziert, weil ich die imagebox will das Bild AutoAdjust, wenn es nicht in einer 1x1-Größe ist Es wird also das Bild nicht dehnen und auch nicht die Bildboxgröße vergrößern.

Wenn Sie jedoch ein langes Porträtbild anzeigen, richtet die Bildbox das Bild automatisch so aus, dass das Bild an Stelle der ursprünglichen Hochformatposition aussieht.

Gibt es eine Möglichkeit, das zu beheben?

Answer 1

Was Sie wollen, ist object-fit CSS-Eigenschaft, leider noch nicht in IE and Edge unterstützt:

img { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #dedede; 
 
} 
 
.contain { 
 
    object-fit: contain; 
 
} 
 
.cover { 
 
    object-fit: cover; 
 
}

<img src="http://lorempixel.com/100/300" class="contain"> 
 
<img src="http://lorempixel.com/100/300" class="cover">

Answer 2

background-size:cover; 

ist nur für, wie der Name sagt, Hintergrundbilder. Beispiel unten

div { 
 
    height:200px; 
 
    width: 200px; 
 
    background-image: url("http://placehold.it/350x150"); 
 
    background-repeat: no-repeat; 
 
    background-size:cover; 
 
    background-position: 50% 50%; 
 
}

<div></div>

Answer 3

In diesem von Code addieren und image, aber Sie wenden das CSS nicht darauf an. Sie wenden das CSS auf Hintergrundbild an.

Verwendung dieser Code in Ihre CSS anstelle

background-image : url (' < Path of image you want to show > '); 
background-size : contain; <!-- You can use 'cover' also but see what you want it to look like --> 

Wenn Sie background-size : cover; dann, wenn das Bild nicht geeignet Seitenverhältnis ist, dann wird es in gezoomt werden alle auf den Bereich abdecken, wo Sie es zeigen, und Wenn Sie background-size : contain; verwenden, wird Ihr Bild in diesem Bereich mit der maximal möglichen Größe angezeigt, in die sowohl die Höhe als auch die Breite des Bildes passen. Wenn Sie irgendwelche Zweifel haben, dann kommentieren