Responsive Image - Height property's default value

HTML-CSS
1

Tell us what’s happening:

Why do I have to add (height: auto;) when the browser by default adjust the height of the image when the width go below the defined 100%?

Your code so far


<style>
img {
  max-width: 100%;
  height: auto;
}  
</style>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0.

Link to the challenge:
learn[.]freecodecamp[.]org/responsive-web-design/responsive-web-design-principles/make-an-image-responsive/

2

If you are talking about responsive design here i recommend using a responsive.css like on “webmization” Check this site and go to the responsive.css file and have a look

3

Thanks for sharing the informative post.

4

Thank you for your reply, I’ll definitely check the website. However, I was hoping to find a logical explanation to why we are defining the height property and giving it a value of auto when the browser automatically adjust the height of the image when it’s width go below 100%. Is it because some browsers won’t do that by default?

5

Hello.

img { width: 100%; } means:
scale the image horizontally to fit the containing element, e.g. a div, irrespective of its actual pixel size.

img { max-width: 100%; } means:
scale the image horizontally, but never let the image get bigger than its actual pixel size.

In the case of width: 100%, the original aspect ratio of the image will be maintained and height:auto is not required. (If you include it by mistake it won’t affect anything.)

In the case of max-width: 100%, height: auto is required to maintain the image’s aspect ratio. If you don’t include this rule you will find that as soon as the screen gets smaller than the actual pixel width of the image it will continue to scale (shrink) horizontally but remain at its actual pixel height.

You can test it here: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image by

  • deleting height: auto from the CSS rule,
  • clicking ‘Run’, then
  • narrowing the browser window on the right until the screen is less than 460px

Hope that helps!

6

Thank you for your reply and your detailed answer.

I find it interesting that the example you included presets the width and height of the image in the img tag, which I’m not sure why it is the case (because the image will still be rendered normally by the browser without these attributes). I can see your point, but again deleting the height attribute from the img tag makes the height responsive and I don’t have to include auto in that case.

It might be silly somehow to give that much thought into something as simple as that, however, I just thought it’s not necessary to add a height rule of auto to the solution when in reality it doesn’t matter because the {max-width: 100%;} would take care of the height responsiveness as well.

Thanks again for your reply.

7

I’d advise always using the height:auto rule with max-width:100%.

The example I showed you has hard-coded width and height attributes, true. This is often the case when the image is output within e.g. Wordpress.

If that was so, then the height attribute could cause trouble. If you have full control over the HTML output then you don’t need height: auto (which is really a safety measure).

More info here: https://stackoverflow.com/questions/30631732/why-do-i-need-height-auto-for-responsive-images

Although simple, it’s worth getting it right as it could affect every image on a site.