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添加min-width。

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

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

我希望这会有所帮助。它应该做的工作。

注意：我注意到，当存在宽度（CSS）时，Google Chrome会使用特定类型的元素，而忽略最大/最小宽度！但并非总是如此。

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

5 个答案: