javascript - 在 HTML 中设置高度属性的流体图像

Question

我在一个布局流畅的网站上工作，对所有宽度和边距等使用百分比。我也想使用 img { max-width: 100% } 技巧使图像流畅，但我遇到了一点问题。

我正在使用 embedagram从帐户中获取最新的 instagram 照片并以 500 x 500 像素显示。这工作正常，但它这样做的方式是将尺寸直接扔到 HTML 中，如下所示:

<img src=" " title=" " width="500" height="500" border="0" align="absmiddle">

因此，max-width 仍然有效，但图像不再按比例缩放 - 它只是挤压和变形。 max-height: 100% 没有帮助。我很难理解 instagram API 文档以及如何将其转换为 javascript，否则我可能会放弃 embedagram 而自己动手。

Answer 1

您只需要将 height: auto 添加到您的样式声明中:

img {
  max-width: 100%;
  height: auto;
}

这是一个 fiddle :http://jsfiddle.net/VDB7A/