html - img 标签不尊重父级的右边距

Question

我在一个 div 中有一个图像。当我调整窗口大小时，我希望图像与 div 保持相同的右侧距离。如果我将图像设置为另一个 div 上的背景，它工作正常，但无法弄清楚如何让它也作为 img 标签工作:

这是它的样子

.mainDiv {
  max-width: 1200px;
  margin: auto;
  width: 95%;
}

.tempImage {
  background: url(https://via.placeholder.com/1200x183);
  height: 183px;
}

<div class="mainDiv">
  <h2>This one works</h2>
  <div class="tempImage"></div>

  <h2>This one doesn't</h2>
  <img src="https://via.placeholder.com/1200x183" alt="">
</div>

Answer 1

.mainDiv {
  max-width: 1200px;
  margin: auto;
  width: 95%;
}

.tempImage {
  background: url('https://dummyimage.com/1200x400/000/fff');
  height: 183px;
}

.img-class {
  width: 100%;
}

<div class="mainDiv">
  <h2>This one works</h2>
  <div class="tempImage"></div>

  <h2>This one does now?</h2>
  <img class="img-class" src="https://dummyimage.com/1200x400/000/fff" alt="">
</div>