Почему div растягивается правильно, а не изображение?

Для <div> параметр width: auto будет означать 100% его родительского элемента, поэтому он будет растягиваться.

Для изображения width: auto (что также используется по умолчанию, если вы вообще не определяете width) будет означать, что (если нет настройки height) изображение отображается в исходном размере и, следовательно, не растягивается и не сжимается. Если вы определите width: 100% или что-то подобное (или настройку высоты), она будет скорректирована.

Я хочу добавить, что если изображение растянуто за пределы его первоначальных пропорций, оно будет выглядеть искаженным и иметь плохое качество, поэтому действительно не имеет смысла растягивать изображение по умолчанию до размера его родительского элемента, что может легко быть больше, чем само изображение.

Чтобы избежать упомянутого искажения из-за растяжения за пределы исходного размера, распространенный способ справиться с этим — использовать max-width: 100%; (а также max-height: 100%, если вы определили высоту для родителя), тем самым оставив width и height по умолчанию auto (= исходный размер). Таким образом, вы растянете изображение на полную ширину, если оно по крайней мере равно ширине исходного родителя, или отобразите его в исходном размере, если оно меньше (избегая плохого качества из-за растяжения за пределы исходного размера). В приведенном ниже фрагменте я использовал только max-width: 100%; (т.е. все остальное с настройками по умолчанию), что ограничивает ширину изображения шириной родительского элемента (минус отступы), позволяет избежать растяжения за пределы исходной ширины и автоматически регулирует высоту, сохраняя исходную высоту/ширину. соотношение. (Кстати, я удалил отрицательные поля, которые вы добавили, что не имело бы смысла в этом контексте)

Примечание. Установка width: 100%иheight: 100% является нет хорошей идеей для изображений, так как в большинстве случаев это искажает соотношение высоты и ширины изображения, делая его плохим (если только это не абстрактный графический узор, где диспропорция между высотой и шириной не имеет значения). дело).

body {
  background: #222;
  padding: 32px;
}

.card {
  background-color: white;
  padding: 32px;
  border-radius: 8px;
}

img {
  max-width: 100%;
  margin: 0;
}

.gooddiv {
  width: auto;
  height: 100px;
  margin: 0px -32px 0px -32px;
  border: 2px solid red
}

<div class = "card">
  <img alt = "SG Image" src = "https://images.unsplash.com/photo-1508964942454-1a56651d54ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" />
  <div class = "gooddiv"></div>
</div>