根据父级div宽度/高度调整图像的100％高度或宽度

Question

I have one dynamic/responsive div with image. And want to make image height or width 100% as per DIV height/width. I dont want to stretch the image. Either width or height should be 100% not both.

Here is the example that I am trying http://jsfiddle.net/CLrUS/

Answer 1

Give CSS for the Image like this

.css{ max-width:100%;

    max-height:100%}

Here the image takes the width of the parent div. Here image wont stretch, image gets the propotional height and weight

Example : http://jsfiddle.net/CLrUS/1/

Answer 2

for increase just height:

.class img{
    height: 100%;
    width: auto;
}

and this one for just width:

.class img{
    height: auto;
    width: 100%;
}

Answer 3

Try this:

<img src="#your image#" onload="imgFitParent($(this));" style="width:inherit; height:inherit;">

<script type="text/javascript">
function imgFitParent(imgElemt)
{
    if(imgElemt.parent().width() > imgElemt.parent().height()){ 
        imgElemt.height("100%"); 
        imgElemt.width('auto'); 
    }else{ 
        imgElemt.width("100%"); 
        imgElemt.height('auto'); 
    }
}

</script>

Like this: JSFIDDLE

Answer 4

use the min-width and max-width

img{
    min-width: 100%;
    max-width: 100%;
}

Try resizing the panel

http://jsfiddle.net/e3yPT/