I also use SVG on any images that I want to take up a full screen by itself. The reading app I use (MARVIN) properly handles SVG but I've heard some kindles ignore SVG after the cover (??) and some devices might not support SVG at all (???). If that is a concern for you, or if you just want to insert an image in the flow of text, you can use the following:
Code:
<div class="whatever"><img alt="" src="../Images/example.jpg" /></div>
with CSS:
.whatever {width:100%; max-width:9999px}
width causes the div to take up the full width of your container.
max-width limits the width of the div to a certain number. If you set that value to the actual width of your image in pixels, then the image will not be stretched and will not blur on larger screens.
If you just use
width then aspect ratio is kept for all images. The problems I find are when people try and set
width AND
height (ie width:100%; height:100%). That usually causes stretching and distortion. Part of the problem is that not all devices/apps define
height the same way... but that's a whole 'nuther topic.
Cheers!