Responsive Design: Images in portrait / landscape mode

Question

So I'm making my theme user-friendly for cellphones, but I really want to make a special thing about images. If the images is landscape, I want the width to be smaller than it would if the images were portrait... And I mean it is possible to do this by the "@media-screen max-width/max-height" thing in css... Am I on the right track? Or do I have to throw in a JS there?

Answer 1

This should be what your looking for. It uses a percentage width and an auto height to make sure all the photos have the same width but the height adjusts to make sure the image doesn't become distorted. The phone tag in the css is only to simulate a phone screen. Hope it helps :D

http://jsfiddle.net/LdeGJ/

img{
width:90%;
height:auto;
}