图片不会调整大小

Question

我正在尝试使图像响应网格。我已经尝试了所有在google上找到的内容，但似乎没有用。 这是我的代码：

<!-- Boxes Section -->
<section class="boxes">
  <div class="box">
    <h2>Rodney Wayne</h2>
      <div class="responsive">
        <img src="img/Rodney_Wayne_Mac.png">
      </div>
  </div>
  <div class="box">
    <h2>Women's Health</h2>
    <div class="responsive"><img src="img/WHA_Mac.png"</div>
  </div>
  <div class="box">
    <h2>Women's Health Action</h2>
  </div>
</section>

css：     / *框* /

.boxes {
  display: grid;
  width:inherit;
  grid-template-columns: repeat(2, 1fr);
  background-color: #dfcb8e;
}

.box {
  width: 100%;
}
.responsive {
  img {
    background-size:

}