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