html - Scale image proportionally to fit parent

Question

I want to scale image proportionally to fit parent

What I'm getting is:

What I want is:

CSS:

.path {
    max-width: 100%;
    max-height: 100%;
    border: 3px solid #d7d7d7;
    cursor: pointer;
}

HTML:

<div>                
    <ul>                  
        <li class="li_parent"><div class="div_parent"><img class="path" src="path/path1.jpg"></div></li>
        <li class="li_parent"><div class="div_parent"><img class="path" src="path/path2.jpg"></div></li>
        <li class="li_parent"><div class="div_parent"><img class="path" src="path/path3.jpg"></div></li>                
    </ul> 
</div>

Javascript:

$(".div_parent").css( { "width" : Math.ceil($(document).width()*0.3)+"px"  } );

$(".div_parent").css( { "height" : Math.ceil($(".div_parent").width()/2.24)+"px"  } );

I want path class (images) to fit to div_parent proportionally...

Answer 1

You are resizing the .div_parent elements, but you never specify that you want the img elements to fill their .div_parent. Instead of using max-height and max-width, use:

.path {
    height: 100%;
    width: 100%;
}

Also, instead of using img elements to display images, you can set the background-image of your .div_parent (or li) elements ( background-image: url(path.jpg) ). This way you can control image size with background-size CSS3 property.

Edit: use CSS background like this:

<ul class="gallery">
    <li style="background-image: url(path1.jpg)"></li>
    <li style="background-image: url(path2.jpg)"></li>
    <li style="background-image: url(path3.jpg)"></li>
</ul>

with:

.gallery li {
    background-size: cover;
}

And set li sizes as you wish with CSS or JavaScript.

Edit2: If you need IE7/8 support, use the following HTML:

<ul class="gallery">
    <li style="
        background-image: url(path1.jpg);
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path1.jpg', sizingMethod='scale');
        -ms-filter:&quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path1.jpg', sizingMethod='scale')&quot;
        "></li>
</ul>