根據父級div寬度/高度調整圖像的100％高度或寬度

Question

我有一個動態/響應的div圖像。 並希望按照DIV高度/寬度將圖像高度或寬度設置為100％。 我不想拉伸圖像。 寬度或高度都不應為100％。

這是我嘗試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/