覆盖img高度以实现响应式设计

Question

我在尝试使我的网站响应以及使用包装很好地布置图像时遇到了一些问题。

<div id="content"> // <- width of this determined through javascript
    <div class="imagecontainer">
        <img src="picture" width=500 height=700>
    </div>
</div>

的CSS：

.imagecontainer{
   max-width:100%;
}
img{
    width:100%;
}

我为max-width设置了100% imagecontainer，以便他们永远不会超过主content div。但是，使用上面的代码，内部图像会被img width水平压扁，而height＆＃39}则不会覆盖imagecontainer。 ; s max-width。这个问题的简单解决方案当然是从height中移除img值，但我只是煞费苦心地添加它，以便packery不会成功通过将帖子放在彼此的顶部进行加载，嘲弄我的布局。将height:auto添加到img css也会破坏布局（当它加载时，只是为了清楚）。

我提出的最佳解决方案是在图片加载后从图片中删除height属性，但我想知道是否有更简单的css-唯一的解决方案，或用js做更聪明的方式？