javascript - 将图像放入容器中，即使 src 已更改

Question

我敢肯定还有其他帖子以各种方式解决了这个问题。

我一直在努力解决这个问题，尝试只使用 CSS 方法但没有成功。玩弄 css 宽度和高度，在图像上混合使用 100% 和自动让我一事无成。

给定的 html:

<div class="container">
    <img src="http://image" />
</div>

和CSS:

.container { width: 500px; height: 400px; }

如何在保持宽高比并遵守容器约束的情况下将各种尺寸的图像放入容器中？

Answer 1

我相信你想多了。

尝试添加以下 CSS，并删除 javascript:

.container img {
    max-width:  100%;
    max-height: 100%;
}

这是一个 demo (点击图片动态加载不同尺寸)