Image width different for landscape / portrait

Question

I have a Tumblr page where all the images have the same width

img.photo_img {max-width: 500px}

is there a way to style differently the portrait and the landscape ones maybe working on their aspect ratio?

I would love to have:

PORTRAIT: width 500px LANDSCAPE: width 750px

Thanks.

Answer 1

you can do this with media queries

@media all and (orientation:portrait) {
    img.photo_img{max-width:500px;}
}
@media all and (orientation:landscape) {
    img.photo_img{max-width:750px;}

}

view an example here