HTML help: width="100%" stretches out images?

Question

I like using width="100%" for my tumblr blog because it stops high res images from creating a horizontal scrollbar on my blog and it "contains" all my images but it also stretches out the smaller images to that max size making the images blurry. How can I stop this? I want the high res images to stay contained but I also want the smaller images to stay true to size. Or maybe there is a different code to "contain" high res images from "spilling over" and being super massive? thanks for any help!

Here's a bit of the code:

{block:Photo} <div class="photo-post">
{LinkOpenTag}<a href="{Permalink}"><img src="{PhotoURL-highres}" width="100%" /> </a>{LinkCloseTag} {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} </div> {/block:Photo}

I've searched all over the web for an answer but no luck! Hopefully somebody can help me with this problem.

Answer 1

You'll want to use a CSS rule instead:

.post-or-whatever img {
    max-width: 100%;
}