如果容器小于图像标称宽度，则缩放图像

Question

我使用简单的reponsive网格http://responsive.gs/，但我还需要图片缩放插件。 就像在标题中一样，如果容器变得比图像宽度小，我想缩放图像。

是否有jquery或JS插件，可以解决这个问题？

Answer 1

<div id='container' style="width:700px;height:300px;">
    <img src="someimage.jpg">
</div>

的CSS：

#container img {
    width:100%;
    height:auto; /* not needed but for the sake of what is happening */
}

这样做是因为您的图像会自动填充容器的宽度 需要一个不会破坏图像宽高比的高度。

不需要js。

您还可以尝试使用以下css属性：width: inherit;从其父级继承该属性。