jquery - Adjust 100% height or width of image as per parent div width / height

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

像这样为图像提供 CSS

.css{ max-width:100%;

    max-height:100%}

这里图像采用父 div 的宽度。这里图像不会拉伸，图像得到比例高度和重量

示例：http: //jsfiddle.net/CLrUS/1/

Answer 2

只增加高度：

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

而这个只是宽度：

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

Answer 3

尝试这个：

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

像这样： JSFIDDLE

Answer 4

使用最小宽度和最大宽度

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

尝试调整面板大小

http://jsfiddle.net/e3yPT/