Flexbox響應元素高度

Question

我嘗試在一行中放入四張不同大小的圖片。 有點像this.

無論如何，我到目前爲止已經把所有東西都放在同一高度，即使有些照片可能會拉得有點過大，但那也沒關係。

但是現在我也希望它具有響應能力，所以如果我降低瀏覽器的大小，圖片應該變小，但它們不會。

請幫忙，這就是我寫到目前爲止。

HTML：

<div class="frontpageinspire"> 
    <img class="top8" id="image1" src="img/abc/abc1.jpg"></img> 
    <img class="top8" id="image2" src="img/abc/abc2.jpg"></img> 
    <img class="top8" id="image3" src="img/abc/abc3.jpg"></img> 
    <img class="top8" id="image4" src="img/abc/abc4.jpg"></img> 
</div> 

CSS：

.frontpageinspire{ 
    max-width: 100%; 
    margin: 0; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    align-items: stretch; 
    align-content: stretch; 
} 

.top8{ 
    height: 300px; 
    padding: 10px 5px 10px 5px; 
    flex-grow: 1; 
    flex-shrink: 1; 
    align-self: center; 
} 

Answer 1

試試這個！

img { 
    width: 100%; 
    height: auto; 
}