Hey there, i’ve started freecodecamp lessons a couple of weeks ago, i’m going through Responsive Web Design Projects. Just finished the first one; everything worked fine except for the responsive image thing. I’ve already solved it after some google but i would like to understand the logics,
#image{
width:100%;
max-width:623px;
display: block; found this line in other post
margin: 0 auto; found this line in other post
}
Any guidance or explanation is appreciated, i would like to read further to understand this
<img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image’s intrinsic values, like it were inline-block .
And here is an excellent description of why you might want inline or block.
As for the margin, the 0 is not needed, but the auto centers the image. (causes equal spacing on either side.
I get the display:block will make the img occupy the whole line, while the margin:auto keeps it centered. Is that right?
It gets me confused that the page was already working as the example without those 2 lines(centered, size relative to parent, etc), but i guess it was just a coincidence.
Indeed, that was controlling the img align as other elements in the page. Would you say that was the incorrect way to do it? Site was working as excpected but not for the right reasons…