Make an Image Responsive: Don't understand the reasoning behind the code

HTML-CSS
#1

Tell us what’s happening:
Hi guys, I don’t understand what is the point of including display: block; and height: auto; in the style for. From what I can tell, the style properties are meant to make the image responsive to changes in the screen size (might be wrong) but when I remove display and height properties, the image still resizes perfectly when the screen size gets smaller. Can someone explain why these properties are included? Thanks!

Your code so far


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

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36.

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

#2

These values are default settings for many html tags. So you might just be getting them for free. You should still understand them though or you will have a hard time fixing alignment on your future webpages.

#3