Flexbox Bildskalierung auf Höhe und Seitenverhältnis beibehalten

Question

Ich habe ein DIV, das mit CSS Flexbox auf die verfügbare Höhe skaliert wird. In diesem DIV ist ein Bild, das ich zusammen mit dem DIV in beiden Dimensionen skalieren möchte. Das heißt, es sollte skaliert werden, wobei das Seitenverhältnis beibehalten wird und die Dimensionen, die kleiner als die jeweilige DIV-Dimension sind, sollten zentriert werden.

Ich kann das Bild der Breite des DIV, aber nicht der Höhe folgen lassen. Portraitbilder entweichen daher aus den DIV-Grenzen.

Hier ist eine jsFiddle, um das Problem zu demonstrieren.

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 
.box { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.box img { 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 90%; 
 
    max-height: 90%; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box" style="background: pink;"> 
 
    <img src="//dummyimage.com/300" /> 
 
    </div> 
 
    <div class="box"></div> 
 
</div>

Answer 1

, wenn Sie von flex ändern zu blockieren:

https://jsfiddle.net/svArtist/ug6eoxfs/

als @janfoeh wies darauf hin, Objekt-fit mit: enthalten macht es möglich:

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow:hidden; 
    position:relative; 
} 

.container { 
    width: 100%; 
    max-width: 100%; 
    height: 100%; 
    max-height: 100%; 
} 

.box { 
    background: yellow; 
    width: 100%; 
    padding: 0 5%; 
    box-sizing:border-box; 
    max-width: 100%; 
    height: 100%; 
    max-height:100%; 
    position:relative; 
} 

.box img { 
    height:100%; 
    max-height: 100%; 
    width: auto; 
    max-width: 100%; 
    margin: auto; 
    position:absolute; 
    top:0%; 
    bottom:0%; 
    left:0%; 
    right:0%; 
    display:block; 
    object-fit: contain; 
} 

Wenn das Flex-Layout benötigt wird, als letztes man bedenkt, könnte ein Hintergrundbild verwenden, die einfach die ganze Sache macht: https://jsfiddle.net/svArtist/e1c2tLme/

background: url(http://placehold.it/300) no-repeat center center; 
    background-size: contain; 

Other than that, kann ich nicht einen Weg finden, dass beinhaltet kein Skripting.

Answer 2

Verwendet flexbox! (JSFiddle)

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.container { 
    display: flex; 
    flex-flow: column; 
    width: 100%; 
    height: 100%; 
} 

.box { 
    flex: 1 1 auto; 
    background: yellow; 
    display: flex; 
    justify-content: center; 
    align-items: stretch; 
} 

.box img { 
    width: 100%; 
    object-fit: contain; 
} 

Der Schlüssel ist object-fit: contain; zu verwenden, um das Seitenverhältnis zu halten und align-items: stretch; das Bild, um sicherzustellen, ist nicht auf der linken Seite und rechts abgeschnitten (könnte dies ein Fehler sein?).

Answer 3

löschen Bildtag und legen Sie es als Hintergrund des .box div mit background-size:cover;
jsfiddle 1

oder, wenn Sie Zuschneiden vermeiden wollen:

das Image-Tag löschen und es als Hintergrund mit der .box div background-size:contain;
jsfiddle 2

Answer 4

Wenn Sie die Höhe als Prozentwert angeben, dh ein Prozentsatz in Bezug auf die Höhe des Elternelements. Dies gilt auch für den Tag .

In diesem Flexbox-Layout unbekannter Höhe können Sie die position Tricks verwenden, um das Bild sowohl an die Breite als auch an die Höhe des Flex-Elements anzupassen, und transform Tricks zum Zentrieren verwenden.

jsFiddle

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.container { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.box { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    position: relative; 
 
} 
 
.box:nth-child(2) { 
 
    background: pink; 
 
} 
 
.box img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"> 
 
    <img src="//dummyimage.com/300" /> 
 
    </div> 
 
    <div class="box"></div> 
 
</div>

Sie auch background Bild verwenden können, dass es viel einfacher machen können, ist der Schlüssel contain den Wert zu verwenden. Siehe die vereinfachte Demo unten.

jsFiddle

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.container { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.box { 
 
    flex: 1 1 auto; 
 
} 
 
.box:nth-child(2) { 
 
    background: pink url(//dummyimage.com/300) no-repeat center center/contain; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 5

Basierend auf @darrylyeo Antwort.

.container { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: stretch; 

    width: 100%; 
    height: 100%; 

    border-radius: 4px; 
    background-color: hsl(0, 0%, 96%); 
} 

.box { 
    border-radius: 4px; 
    display: flex; 
} 

.box img { 
    width: 100%; 
    object-fit: contain; 
    border-radius: 4px; 
}