Flexbox圖像縮放到高度並保持縱橫比

Question

我有一個DIV，使用CSS flexbox縮放到可用高度。在這個DIV中，我想在兩個維度中與DIV一起縮放圖像。這意味着它應該按比例保持其縱橫比，並且小於相應DIV尺寸的尺寸應該居中。

我可以使圖像遵循DIV的寬度，但不是高度。因此，肖像圖像從DIV界限中逃脫。

這是一個jsFiddle來演示問題。

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

如果你可以從彈性變爲阻止：

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

爲@janfoeh指出，使用對象的配合：含有能夠：

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

如果需要Flex的佈局，作爲最後的手段可以考慮使用一個背景圖片，這讓整個事情非常簡單：https://jsfiddle.net/svArtist/e1c2tLme/

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

除此之外，我無法找到一種方式，不涉及腳本。

Answer 2

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

的關鍵是使用object-fit: contain;保持縱橫比，align-items: stretch;保證了圖像的左側和右側（也許這是一個錯誤？）沒有切斷。

Answer 3

刪除圖像標籤，並與background-size:cover;
jsfiddle 1

將其設置爲.box div的背景，或者，如果你想避免重茬：

刪除圖像標籤，並將其設置爲背景在.box DIV與background-size:contain;
jsfiddle 2

Answer 4

的當您指定的高度爲百分比值，即相對於父元素高度的百分比。 <img>標籤也是如此。

在這個未知高度柔性箱佈局中，您可以使用position技巧使圖像適合柔性物品的寬度和高度，並使用transform技巧進行居中。

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>

您還可以使用background圖像，可以使它更容易，關鍵是要使用的值contain。請參閱下面的簡化演示。

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

基於@darrylyeo答案。

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