如何使Flexbox項目適合其圖像尺寸？

問題是，圖像作爲一個整體不得不伸展以適應調整窗口的大小。如何使Flexbox項目適合其圖像尺寸？

大部分圖片都可以正常工作，但最後一張圖片的寬度不同，它只是調整大小。

它必須是絕對位置，因爲下面有一個網頁畫布。

我想我嘗試了一切，所有的flex-grow，flex-basis的東西。我不明白。

正如您在示例中看到的那樣，最後一張圖片應該與其他圖片在高度方向上吻合，但我無法將其合理化。

.container img { 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    width: 40%; 
 
    background: #777; 
 
} 
 

 
.container2 { 
 
    width: 12.5%; 
 
    background: #777; 
 
} 
 

 
.myflex { 
 
    display: flex; 
 
    position: absolute; 
 
}

<div class="myflex"> 
 
    <div class="container"> 
 
    <img src="https://placehold.it/512x512/000088/ffffff" /> 
 
    </div> 
 
    <div class="container"> 
 
    <img src="https://placehold.it/512x512/000088/ffffff" /> 
 
    </div> 
 
    <div class="container"> 
 
    <img src="https://placehold.it/512x512/000088/ffffff" /> 
 
    </div> 
 
    <div class="container2"> 
 
    <img style="" src="https://placehold.it/64x512/000088/ffffff" /> 
 
    </div> 
 
</div>

來源

2017-05-03 Blub

使用此Flexbox，就在一行

 <!DOCTYPE html> 
<html> 
<head> 
<style> body{margin:0;} 
.flex-container { 

    -ms-box-orient: horizontal; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    -webkit-flex-flow: row; 
    flex-flow: row; 
    -webkit-align-items: stretch; 
    align-items: stretch; 
} 

.flex-item:nth-of-type(1) { flex-grow: 1; } 
.flex-item:nth-of-type(2) { flex-grow: 1; } 
.flex-item:nth-of-type(3) { flex-grow: 2; } 
.flex-item4:nth-of-type(4) { flex-grow: 1; } 
.flex-item { 
    background-color: cornflowerblue; 
    width: 40%; 
} 
.flex-item 4{ 
    background-color: cornflowerblue; 
    width: 10%; 
    margin: 10px; 
} 
.flex-item img{ 
    width: 100%; height: 100%; 
}.flex-item4 img{ 
    width: 100%; height: 100%; 
} 
</style> 
</head> 
<body> 

<div class="flex-container"> 
    <div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div> 
    <div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div> 
    <div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div> 
    <div class="flex-item4"> <img style="" src="https://placehold.it/64x512/000088/ffffff" /></div> 
</div> 

</body> 
</html>

來源

2017-05-03 11:19:50

非常感謝您！你能解釋一下'.flex-item 4 {}'語法嗎？它在vscode中無效，但它起作用。我試着說'flex-item4 {}'，但它不再工作了。它也只適用於基於Chrome的瀏覽器，不會在Firefox或Edge中顯示相同的正確結果。 – Blub

如果你想給所有的時間圖像的高度相同，只需添加display: flex;您.container和.container2類。

這裏有一個演示：

http://jsfiddle.net/huvogt3g/1/

來源

2017-05-03 11:24:53

如何使Flexbox項目適合其圖像尺寸？

回答

相關問題