Question

我正在尝试使我的徽标图像在页面上响应。我使用了创建的响应类，并在样式表中将该类的宽度设置为最大宽度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

您正在class Account (models.Model): date = models.DateField(primary_key=True) inflows = models.FileField(null = True, max_length=100) outflows = models.FileField(null = True, max_length=100)上设置700px的显式硬宽度，这与img的目标相反。如果您希望图像保持缩放比例，但在视口之外不要，请尝试以下操作：

max-width: 100%

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

jsFiddle

使图像响应

1 个答案: