Hi. I was working on my html/css project, and one of the requirement was to make the image responsive.
According to fcc, to make image responsive, I should use following lines of css code.
img {
max-width: 100%;
height: auto;
}
However, I was still not passing the test, and it said “Use the “display” style property with a value of “block” for responsive images”. So I added display:block to css img selector. Then it passed the test. But why should I make the responsive image block element instead of inline element? Although I have passed the test, it’s bugging me😂
Welcome to the forum community!
You should learn more about what the display property does!
I’ll provide a couple of snippets from the website below to provide you with a high level overview of what they do. Hope this helps!
Inline
If you set an element to have display inline, any height and width properties will have no effect. So if you’re telling an image to be display inline than any height or width properties just won’t work properly!
Block
This will cause the element to start on a new line and take up the whole width. You will want the image to take up all of the width on the new line.
Because you used max-width:100% you will not allow the image to go over 100% and change the way the aspect ratio looks. No one likes a stretched picture.