Изменить размер картинки в flex

Question

каждый.

Итак, я сделал это графическое окно с помощью flexbox введите описание изображения здесь

Когда я изменяю размер - это не сохраняет структуру то же самое.

введите описание изображения здесь

Вот код:

HTML

<div class="fourthOne">
    <div class="signUpBox">
        <img src="./images/banner_1_1.png" alt="banner image 1">
        <img src="./images/banner_1_2.png" alt="banner image 2">
        <img src="./images/banner_1_3.png" alt="banner image 3">
        <img src="./images/banner_2_1.png" alt="banner image 4">
        <img src="./images/banner_2_2.png" alt="banner image 5">
        <img src="./images/banner_2_3.png" alt="banner image 6">
        <div class="darkerDiv">
            <h2>Каждая фотография это история</h2>
            <a href="http://"><button class="portofolioLink">Напиши свою</button></a>
        </div>
    </div>
</div>

CSS

.fourthOne{
    min-height: auto;
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(79,1,186,1) 0%, rgba(58,2,101,1) 100%);
    padding: 100px 0;
}
.signUpBox{
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    display: flex;
    flex-flow: row nowrap;
    flex-wrap: wrap;
    align-content: stretch;
    box-sizing: border-box;
    flex: 1 auto auto;
}
.darkerDiv{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 100px;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}
.darkerDiv h2{
    color: white;
    font-weight: normal;
    font-size: 50px;
    width: 60%;
    margin: 0 auto;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}
.signUpBoxImg img{
    width: 100%;
}

Не нашел здесь такой же ситуации, и поэтому я публикую сейчас. Можно ли как-то сохранить структуру изображения (для увеличения или увеличения)

PS старался изо всех сил в Engli sh, извините, если орфография или слова неверны. Будет активным в потоке. Thx