Некоторые изображения на моей веб-странице сжимаются, но другие не сжимаются даже с теми же свойствами. ⇐ CSS

[Anonymous]

Если я изменю размер окна, div/img в ComputerSection не сжимается, тогда как div/images в userSection сжимаются при этом.
Оба из них имеют одинаковый CSS, я использую flexbox в них обоих, и никаких других свойств flex не добавлено.
Я не могу понять почему изображение справа не уменьшается?

Код: Выделить всё

.userSection {
text-align: center;
display: flex;
flex-direction: column;
border-right: solid;
border-color: black;
border-width: 2px;
padding: 0px 100px;
flex-grow: 1;
}

#bodyDiv {
display: flex;
justify-content: space-evenly;
margin-top: 50px;
}

.headerDiv {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}

.headerSubDiv {
transition: 0.7s;
border-radius: 50%;
max-width: 100px;
max-height: 100px;
}

.userAddOn {
border-width: 3px;
border: solid;
border-color: aqua;
border-radius: 50%;
height: 100%;
width: 100%;
}

.computerImg {
border: solid;
border-width: 3px;
border-color: brown;
border-radius: 50%;
height: 100%;
width: 100%;
}

Код: Выделить всё

Player please choose:


[img]https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2[/img]
[img]https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2[/img]
[img]https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2[/img]




Computer's choice:

[img]https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2[/img]

Подробнее здесь: https://stackoverflow.com/questions/790 ... g-even-wit