Тег 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>

Answer 2

Вы можете установить свойство max-width на изображении или свойство переполнения на контейнере div, в зависимости от того, хотите ли вы, чтобы изображение масштабировалось или было обрезано:

max-width:

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

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

img {
  max-width: 100%;
}

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

  <h2>So does this one</h2>
  <img src="https://via.placeholder.com/1200x183" alt="">
</div>

переполнение:

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

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

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

  <h2>So does this one</h2>
  <img src="https://via.placeholder.com/1200x183" alt="">
</div>

Answer 3

Попробуйте свойство max-width тега img.