css - 仅在较大时使图像缩放到父 div，同时使用显式最大宽度

Question

我可以在较小的屏幕上响应父 div 缩放图像，但仍限制为明确的最大宽度：

img {
    max-width: 500px;
    width: 100%;
}

但是，如果图像比父 div 小，它仍然会被拉伸以填充 div。

有没有办法让它只有在它更大时才缩放到 100%，并在它更小时保持其原始尺寸，而不事先知道图像的尺寸？

Answer 1

您可以设置图像的最大宽度：100%；仅当它大于其父级时才会限制其大小。

img {
    height: auto;
    max-width: 100%;
}

在这里演示：http: //jsfiddle.net/LMEwC/

Answer 2

如果您使用的是 Bootstrap（版本 3.x，也许还有其他版本），您也可以使用

class='img-responsive'

在您的<img>标签上将其调整为父元素的大小。

Answer 3

您可以将图像放在 div 中并应用以下样式：

<div><img></div>

div{max-width: 500px}
img{max-width: 100%}

jsFiddle上的示例

Answer 4

向 css添加最小宽度。

img {
    width:100%;
    min-width:50px;
}

Answer 5

使用 JavaScript 找到图片和 div 各自的宽度/高度，然后调整图像大小以适合 div。

您可以使用此代码查找高度，创建此函数。

function getHeight(id)
{
return document.getElementById("id").offsetHeight; // Change to .offsetWidth to gain width :)
}

像这样调用函数：

function resize()
{
var imgHeight = getHeight("img");
var divHeight = getHeight("div");

//Then ask:

    if(imgHeight > divHeight)
    {
    pic = document.getElementById("img");
    pic.style.height = divHeight;
    }
}

现在你需要一些动作来调用函数，可能有用吗？或一些点击事件？取决于您如何使用此图像。

我希望这有帮助。它应该完成这项工作。

注意：我注意到，当存在宽度 (CSS) 时，Google Chrome 与特定类型的元素一起使用时会忽略最大/最小宽度！但不总是。