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

[Anonymous]

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

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]

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

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

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

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