css - 使图像响应

Question

我正在尝试使我的 Logo 图像在我的页面上响应。我使用创建的响应类并在样式表中将该类的宽度设置为最大宽度 100%，但是当我调整浏览器大小时图像仍然没有缩放。

HTML 部分:

<div align="center" class="div3">
    <img src="http://www.revolutionvinyl.net/rvgglitch.gif" width="700" 
    height="700" class="responsive" alt="RVG Logo"> 
</div>

CSS 部分:

.responsive {
    max-width: 100%;
    display: block; 
    height: auto;
}

提前致谢!这个网站让我抓狂，所以这个修复会有很大帮助。

Answer 1

您在 img 上设置了 700px 的显式硬宽度，这否定了您使用 max-width: 100% 的目标。如果您希望图像保持缩放，但不超出视口(viewport)，请试试这个:

.responsive {
  width: 100%;
  max-width: 100%;
  display: block;
  height: auto;
}

<div align="center" class="div3"><img src="http://www.revolutionvinyl.net/rvgglitch.gif" class="responsive" alt="RVG Logo"> </div>

jsFiddle