I'm looking for a way (any way, could be html, css or javascript) to make an image to be scale down only. Here is what I means: if I have something like
- Code: Select all
<img src="picture.jpg" width="100%" alt=""/>
it will fill the full space it can occupy (let say the whole viewport). Now if I have image with width resolution of 800px, and my viewport is 1024px, it will be scaled up, and if the viewport is 640px, it will be scaled down.
What I want is that if the viewport is 1024px, it is not scaled at all (remain at the original resolution, that is 800px). But if the viewport is less than 1024px, than it will be scaled down to fit.
Is there a way to do this?
I can do this is using XSL (scalefit="1", width="100%", and contentdepth="100%"). But since my site is going for XHTML 1 Transitional compliance, I can't do that. Any idea how to do it with the normal HTML or CSS2 (or worst case scenario will be javascript)?
