在flexbox中將圖像縮放到最大尺寸

我有一個flexbox，其中有一些flexbox項目，寬度約爲50％。 Flexbox項目包含一個或多個<p>元素或單個<img />。在flexbox中將圖像縮放到最大尺寸

帶圖像的flexbox項目應該是完全填充與圖像，沒有它被設置爲超過div的背景。圖像總是似乎有一個小的紅色欄下面，即使圖像填充整個寬度。我怎樣才能讓圖像填充整個Flexbox項目？

如果圖像的高寬比發生變化，則無關緊要。

我不只是想圖像下方的空白空間不見了。我希望它能夠使用Flexbox項目的整個寬度。所以它會填充Flexbox項目。

.container { 
 
    width: 500px; 
 
} 
 
.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.flex-item { 
 
    border: 1px solid black; 
 
    background: red; 
 
    margin: 25px 0; 
 
    width: 47%; 
 
    flex-basis: 47%; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    background: white; 
 
}

<div class="container flexbox"> 
 
    <div class="flex-item"> 
 
    <p>It should work with a big image</p> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <img src="http://goo.gl/6EO4mj" /> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <p>But also with a small one</p> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <img src="http://goo.gl/nxXSMO" /> 
 
    </div> 
 
    <div>

編輯：添加的重視。增加了更多的解釋。

來源

2015-10-11 Simon

這似乎並不像你在這裏試過任何東西。是的，你有代碼，但我沒有看到任何跡象表明你已經試圖使圖像伸展或以其他方式填充容器。 – cimmanon

@cimmanon我嘗試了幾種顯示模式。使用更高的最大寬度。繼承父div的寬度。我無法讓它正常工作。 – Simon

替代重複：http://stackoverflow.com/questions/16501668/stretch-image-to-fit-100-of-div-height-and-width – cimmanon

加入display:block到IMG：

.container { 
 
    width: 500px; 
 
} 
 
.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.flex-item { 
 
    border: 1px solid black; 
 
    background: red; 
 
    margin: 25px 0; 
 
    width: 47%; 
 
    flex-basis: 47%; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    background: white; 
 
    display :block 
 
}

<div class="container flexbox"> 
 
    <div class="flex-item"> 
 
    <p>It should work with a big image</p> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <img src="http://goo.gl/6EO4mj" /> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <p>But also with a small one</p> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <img src="http://goo.gl/nxXSMO" /> 
 
    </div> 
 
    <div>

說明：默認情況下，IMG顯示inline和vertical-align:baseline，你看到的空間基線下方的空間。

您還可以將垂直對齊更改爲middle;

來源

2015-10-11 14:58:02 maioman

在flexbox中將圖像縮放到最大尺寸

回答

相關問題