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

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

我可以使圖像遵循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>

來源

2015-05-19 languitar

你想讓圖像適合高度，即使它自然較小？（在你的例子中你使用的是一張相當大的圖片，所以我不確定） –

我想要實現的第一件事是它按需要縮小比例。 – languitar

不，對不起，圖像應保留其原始長寬比。如果這個容器與容器的容器不同，則圖像應該在調整大小後沿着小於容器的軸的中心。 – languitar

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

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;

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

來源

2015-05-19 18:00:40

對不起，但這正是我在小提琴中所做的，它不起作用？ – languitar

感謝您的解決方案。我會試一試，看看我是否可以重新排列我的佈局或切換到背景圖像。我不確定我是否可以接受這是特定Flexbox問題的答案。 – languitar

是的，這並不理想。那麼JavaScript不是一種選擇？ –

使用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;保證了圖像的左側和右側（也許這是一個錯誤？）沒有切斷。

來源

2016-03-23 00:09:36 darrylyeo

這確實限制了圖像，但它留下了額外的高度。請參閱https://fiddle.jshell.net/betae931/1窄面板寬度。 – isherwood

謝謝。必備：http://caniuse.com/#feat=object-fit – DanMan

-1

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

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

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

來源

2016-03-23 12:58:56

這兩種情況都會導致圖像裁剪。 – isherwood

您尚未顯示與圖像高度匹配的柔性容器。這不符合OP的要求。 – isherwood

的當您指定的高度爲百分比值，即相對於父元素高度的百分比。 <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>

來源

2016-03-24 15:20:03 Stickers

基於@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; 
}

來源

2017-07-11 15:58:25 ukr

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

回答

相關問題