我正在尝试使我的 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;
}
提前致谢!这个网站让我抓狂,所以这个修复会有很大帮助。
最佳答案
您在 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>
关于css - 使图像响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58568839/