The way I understand it:
Width:x% sets the width of the element to the given percentage
of the containing element. So if you are wrapping your image with a div
Code:
<div><img alt="" src="me.jpg" width="100%" /></div>
you should get an image that covers the entire width of the screen because the div covers the entire screen in this example. If the image is a portrait type image with height greater than width, then the image will spill onto another page.
If your wrapper is a different width:
Code:
<div style="width:50%"><img alt="" src="me.jpg" width="100%" /></div>
then the image will fill 100% of the wrapper, in this case half the screen because the div is only 50% wide - the height may or may not spill over.
Setting the max-width is telling the browser that "you can have any width setting, but cannot be greater than X. I set max width/height as I mentioned in the previous post to keep any image to 1 page with proper aspect ratio. You can also use it if you want an image to scale with the screen size, but not get so large that it looks ugly.
Code:
<div><img alt="" src="me.jpg" width="10%" style="max-width:50px" /></div>
For small images (eg Chapter head images) I want it to be 10% of the screen size, but I don't want it to ever exceed 50 pixels wide (the actual size of the image) to avoid pixelation.