エレメントのフレックスボックスの応答の高さ

Question

異なるサイズの4つの画像を1つの行に入れようとします。 はちょっととにかくthis.

のように、私はいくつかの写真は少しあまりにも多くを伸ばす​​可能性があるにもかかわらず、これまでと同じ高さの行にすべてをかけるようになったが、[OK]をthatsの。

しかし、今私はそれが応答するようにしたいので、私は私のブラウザのサイズを下げると、写真は小さくなるはずですが、彼らはしないでください。

私がこれまでに書いたことは助けてください。

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