Is `height: auto;` needed when setting width on an image?

Question

When setting width on an <img>, either with width or max-width, I've seen that many developers and some frameworks (like bootstrap) also set height: auto.

Is height: auto required in such cases, and if so why? (Assuming you want to keep the image proportional when resized, and that height has not been set previously in CSS.)

Someone mentioned that it's needed for IE10 on Windows Phone 8. (Which seems odd to me.) Could it be that some browsers require this setting?

Example (fiddle):

div{
    border: 2px solid red;
    width: 300px;
}
.maxwidth{
    max-width: 100%;
}
.width{
    width: 100%;
}

<p><code>max-width: 100%</code>:</p>
<div><img class="maxwidth" src="https://placeimg.com/640/480/animals"></div>

<p><code>width: 100%</code>:</p>
<div><img class="width" src="https://placeimg.com/640/480/animals"></div>

<p>No <code>height: auto</code> is used, but images still stay proportional.</p>

Answer 1

For starters, the initial value for height is auto, so unless it's been overridden somewhere else you shouldn't need to specify height: auto.

Furthermore I don't know how tightly this relates to the img element itself over CSS images (backgrounds, etc.), but I believe the browser should handle this automatically anyway. If this documentation does also apply to the img element, I believe the the Default Sizing Algorithm section of the CSS Image Values and Replaced Content Module Level 3 explains how the browser should handle this:

The default sizing algorithm is defined as follows:

• If the specified size is a definite width and height, the concrete object size is given that width and height.

• If the specified size is only a width or height (but not both) then the concrete object size is given that specified width or height. The other dimension is calculated as follows:

  1. If the object has an intrinsic aspect ratio, the missing dimension of the concrete object size is calculated using the intrinsic aspect ratio and the present dimension.

  2. Otherwise, if the missing dimension is present in the object's intrinsic dimensions, the missing dimension is taken from the object's intrinsic dimensions.

  3. Otherwise, the missing dimension of the concrete object size is taken from the default object size.

---

Update

It appears Bootstrap uses it to override any custom height attribute present on an img element to ensure the height is always calculated from the width.