我网页上的一些图像正在缩小，但其他图像即使具有相同的属性也不会缩小

Question

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

如果我调整窗口大小，computerSection 中的 div/img 不会缩小，而 userSection 中的 div/images 则会缩小。它们都有完全相同的 CSS，我在它们中都使用了 flexbox，并且没有添加其他 flex 属性。 我不明白为什么右边的图像没有缩小？当我在 Codepen.io 中编写代码时，也会发生同样的情况。

Answer 1

您尚未定义.computerSection 在 .userSection 后面添加一个逗号，然后在其中添加 .computerSection，然后就可以了

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