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

Question

我正在使用简单的响应式网格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;它从其父级继承属性。