Some of the Image on my webpage are shrinking, but other are not shring even with same properties
<div id="bodyDiv"> <div class="userSection" > <div class="headerTitle"><p>Player please choose:</p></div> <div class="headerDiv"> <div class="headerSubDiv"><img class="userAddOn" src="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"></div> <div class="headerSubDiv"><img class="userAddOn" src="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"></div> <div class="headerSubDiv"><img class="userAddOn" src="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"></div> </div> </div> <div class="computerSection" > <div class="headerTitle"><p>Computer's choice:</p></div> <div class=" headerSubDiv"><img class="computerImg" src="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" ></div> </div> </div> .userSection{ text-align: center; display: flex; flex-direction: column; border-right: solid; border-color: black; border-width: 2px; padding: 0px 100px;