I use something similar. I’ll set the % of the screen I want to use but also limit the maximum to roughly the size of the images dimension. This helps a lot to prevent over-expanding the image and making it fuzzy.
Code:
CSS:
img {max-height:100%; max-width:100%}
div.image {width:50%; margin:1em auto}
div.image img {max-width:600px}
HTML:
<div class="image"><img alt="" src="../Images/test.jpg"/></div>
**set to the actual dimension of the image.