[FIXED] Why does the div stretch correctly but not image?

Issue

I am new to HTML/CSS and curious why div stretch correctly in below example, but not image?

• Is the image calculated differently than div?
• Is there an MDN documentation i can read more about this behavior?

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

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

img {
  width: auto;
  margin: 0px -32px 0px -32px;
}

.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>

Solution

For a <div>, a width: auto setting will mean 100% of its parent element, so it will stretch.

For an image, width: auto (which is also the default if you don't define width at all) will mean that (unless there is a height setting) the image is displayed at its original size and therefore not stretch or shrink. If you define width: 100% or similar (or a height setting) , it will adjust.

I want to add that if an image is stretched beyond its original proportions, it will look distorted and have a bad quality, so it really wouldn't make sense to stretch an image by default to the size of its parent element, which might easily be larger than the image itself.

To avoid the mentioned distortion due to stretching beyond original size, a common way to handle that is to use max-width: 100%; (and also max-height: 100% if you defined height for the parent), thereby leaving width and height at their default auto (= original size). That way you'll stretch the image to full width if its at least as wide as the parent originally, or have it displayed at original size if its smaller (avoiding bad quality due to stretching beyond original size). In the snippet below, I only used max-width: 100%; (i.e. everything else at default settings), which limits the image width to the parent element width (minus padding), avoids stretching beyond original width and adjusts the height automatically, keeping the original height/width ratio. (BTW. I erased the negative margins you added, which wouldn't make sense in this context)

Note: Setting width: 100% and height: 100% is not a good idea for images since in most cases this will distort the height/width proportion of the picture, making it look bad (unless it's an abstract graphic pattern where a disproportion between height and width doesn't matter).

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>

Answered By - Johannes

Answer Checked By - David Marino (PHPFixing Volunteer)