使图像响应

Question

我正在尝试使我的徽标图像在我的页面上响应。我使用了创建的响应式 class 并在样式表中将 class 的宽度设置为最大宽度 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% 的目标。如果您希望图像保持缩放，但不超出视口，请尝试以下操作：

.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

使图像响应

Making Image Responsive

css

image

responsive