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

快速解决方法是使用！important指令使用CSS设置图像尺寸的样式：

img {
    width: 100% !important;
    height: 100% !important;        
}

我相信这是让你的css优先于标记中的属性设置的唯一方式。

一个更干净的解决方案可能是完全消除这些属性，但这会涉及一些脚本 - 要么修改插件而不是首先包含它们 - 或者在设置之后重置它们。

Answer 2

您只需要在样式声明中添加height: auto：

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