CODEWITHSUNDEEP
javascripthtmlcsswordpressresponsive-design
user2432661
user2432661

Reputation:

Responsive Design: Images in portrait / landscape mode

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?

Upvotes: 1

Views: 2111

Answers (1)

user2253953
user2253953

Reputation: 11

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;
}

Upvotes: 1

Related Questions