Javascript 超越img高度，实现响应性设计

我有一个小问题，试图使我的网站响应以及布局的图像很好地与派克

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

我已经为我的

imagecontainer

设置了

max width

为

100%

，这样它们就永远不会大于主

content

div。但是，使用上面的代码，内部的图像会随着

img

的

width

水平挤压，但是，

高度

不被

图像容器

的

最大宽度

否决。这个问题的简单解决方案当然是从

img

中删除

height

值，但我只是煞费苦心地添加了它，这样就不会在加载布局时通过将帖子放在彼此的顶部来嘲笑我的布局。将

height:auto

添加到img css中也会破坏布局（为了清楚起见，在加载布局时）

---

我想到的最好的解决方案是在图像加载后从图像中删除

height

属性，但我想知道是否有一种更简单的仅css的解决方案，或者一种更聪明的方法来使用js？

如果问题源于页面加载期间图像的高度，考虑使用<代码>最小高度> /代码> CSS属性，而不是<代码>高度>代码>属性。我用CSS <代码> min高度完全相同的行为，如HTML（代码）>高度>代码>图像，即图像应该在何处加载，但当容器比图像更窄时，问题是布局似乎不允许图像具有固定的高度或宽度，甚至不允许图像具有固定的最小高度或宽度。考虑设置一个固定的最小值并在加载后移除它。您只需在脚本动态设置

content

元素的高度后，向该元素添加一个类即可实现这一点。

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