CSS图片无法调整尺寸求助：样式表已生效但图片无变化

我用CSS无法调整图片的尺寸，尝试了此前相关问题的所有解决方案，但仍然无法改变图片大小。确认样式表已正确链接，因为页面元素已被成功居中，烦请告知问题所在，谢谢。

代码示例 #

CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.menuContainer {
  display: grid;
  place-items: center;
  height: 100vh;
}

.menuBox img {
  width: 300px;
  height: 300px;
}

HTML代码 #

<div class="menuContainer">
  <div class="menuBox"></div>
  <h1 id="item">Food Item1</h1>
  <p id="oneLiner">Lorem ipsum dolor sit amet. Et deleniti officiis eos possimus omnis e! </p>
  <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img">

  <h2 id="hotel">Hotel name1</h2>
  <p id="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?</p>
  <div class="btn">
    <button id="prev"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtb_on3v-MaK_PJ7IQW4odw2kfxHc9Tw_GkQ&usqp=CAU> </button>
    <button id="random">Random Menu</button>
    <button id="next">:arrrow </button>
  </div>

</div>

问题原因 #

你的CSS选择器.menuBox img是用来选中嵌套在.menuBox容器里的图片，但从HTML结构能看到，你要调整的目标图片（带id="img"的那张）是直接放在.menuContainer下面的，根本不在.menuBox里面，所以这个样式规则完全没作用到目标图片上。

解决方案 #

有两种简单的修复方式，选一种就行：

方案1：调整HTML结构，把目标图片放进.menuBox #

<div class="menuContainer">
  <div class="menuBox">
    <!-- 把图片移到这里 -->
    <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img">
  </div>
  <!-- 其他元素保持不变 -->
</div>

方案2：修改CSS选择器，直接选中目标图片 #

可以用优先级更高的ID选择器，或者直接选中容器下的图片：

/* 用ID选择器，精准定位目标图片 */
#img {
  width: 300px;
  height: 300px;
}

/* 或者选中.menuContainer下的所有图片（如果需要批量调整） */
.menuContainer img {
  width: 300px;
  height: 300px;
}

如果不想让按钮里的小图片被这个样式影响，可以单独给它加样式：

.btn img {
  width: 20px; /* 按需设置尺寸 */
  height: 20px;
}

内容的提问来源于stack exchange，提问作者Lizzy