根据父 div 宽度/高度调整图像的 100% 高度或宽度答案

【问题标题】：Adjust 100% height or width of image as per parent div width / height根据父 div 宽度/高度调整图像的 100% 高度或宽度
【发布时间】：2013-10-10 23:11:48
【问题描述】：

我有一个带有图像的动态/响应式div。并希望根据 DIV 高度/宽度使图像高度或宽度为 100%。我不想拉伸图像。宽度或高度应为 100%，而不是两者。

这是我正在尝试的示例http://jsfiddle.net/CLrUS/

【问题讨论】：

您是否希望按比例拉伸以填充？还是适合？你想把它居中，还是让它与顶部对齐？或者不关心纵横比，只希望它填充<div>？而且你事先知道长宽比吗？
@Ktash 它应该拉伸但保持原始纵横比。是的，它应该是中心/垂直和水平。没有固定的纵横比。

标签： jquery html css

【解决方案1】：

为这样的图像提供 CSS

.css{ max-width:100%;

    max-height:100%}

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

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

【讨论】：

在 Chrome 中效果很好。这适用于所有浏览器吗？
@Mark Rummel 它适用于所有浏览器......跨度>

【解决方案2】：

只增加高度：

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

这个只是宽度：

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

【讨论】：

【解决方案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

【讨论】：

不要将函数用于 CSS 样式。

【解决方案4】：

使用最小宽度和最大宽度

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

尝试调整面板大小

http://jsfiddle.net/e3yPT/

【讨论】：