+ 1

why there is a difference max-width and width set to 100% on img in css,when parent element is body

When width is 100% on image element,image is occupying full screen space on resizing.When max-width is set to 100% on image element,image is not occupying full screen space.Why there is difference in o/p Note:image element is not inside any other element.It is just placed inside body tags <!DOCTYPE html> <html> <head> <style> img { max-width: 100%; } </style> </head> <body> <h2>Responsive Images</h2> <p>Responsive images will automatically adjust to fit the size of the screen.</p> <p>Resize the browser window to see the effect:</p> <img src="https://i.picsum.photos/id/240/200/200.jpg?hmac=PZiJibMUuv5Zpv9MAcqLaCYJOPt-XNuDh3RPBZiGcoY" alt="Cinque Terre" > </body> </html>

html css

12th Jul 2020, 9:15 AM

Shashi Reddy

1 Answer

+ 3

width is relative to it's parent, in your case body. width: 100% will set image width to 100% and that's why it occupies full screen. max-width is not setting width but setting limit that this thing can have maximum width of this value. max-width: 100% will not add any width to your image, so it's same as default styled image. [EXPLAINED] https://code.sololearn.com/WQ23atWYIFfi/?ref=app

12th Jul 2020, 12:56 PM

Raj Chhatrala