dynamic - Resizing vertical and horizontal images in CSS -

dynamic - Resizing vertical and horizontal images in CSS -

html

<section class="rama"> <ul> <li><img src="images/rama_detail.jpg"/></li> <li><img src="images/rama_detail2.jpg"/></li> </ul>

css

section img { max-height:500px; width:100%; height:auto; overflow:hidden; }

so here's problem. want dynamically resize both images. width:100%; height:auto; work great horizontal image, vertical images width stretch out because of width:100%;. there simple way dynamically resize both vertical , horizontal images without using different classes both image type?

thank you!

i think best alternative utilize jquery iterate on images, , dynamically add together appropriate class:

fiddle: http://jsfiddle.net/m5y53/4/

css

section img {overflow:hidden;} section img.landscape {max-width:200px; width:100%; height:auto;} section img.portrait {max-height:200px; width:auto; height:100%;}

i split declarations landscape , portrait images in subclasses, rest of declarations (in case overflow:hidden; don't have repeated both subclasses.

js (jquery)

$(window).on('load',function(){ $('section img').each(function(){ //you need set within window.onload-function (not document.ready), otherwise image dimensions won't available yet if ($(this).width()/$(this).height() >= 1) { $(this).addclass('landscape'); } else { $(this).addclass('portrait'); } }); });

now, using jquery, iterate on each image fits section img-selector, , dynamically add together appropriate class. determine whether image has landscape or portrait format, check see if width/height larger (or equal) 1.

i wasn't sure how wanted images scaled, set max-width:200px , max-height:200px within subclasses, scale them parent-width , -height (see commented-out css rule .rama ul li).

css dynamic resize