仅在较大时才使图像缩放到父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

向 css添加最小宽度。

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