我使用 Bootstrap 3.3.5 构建的网站包含我想要响应的图像,因此我为它们分配了 .img-responsive 类。但是,它们在 Firefox 中没有响应(当我将窗口调整为更小的尺寸时,图像不会变小,因此会出现滚动条)。在 Internet Explorer 中,它工作得很好。我还没有尝试过任何其他浏览器,我读到了可以通过添加“宽度:100%;”来修复的错误。但这并不能解决我的问题(它唯一要做的就是在我缩小窗口时使图像更大,以便包含它的列是该行中唯一的列。随着我继续制作,它会再次变小窗口更小,但是当它的大小我想要更大的屏幕时,滚动条再次出现。我尝试添加“宽度:100%;”内联到html标签,我尝试将它添加到我的 CSS 中。我还尝试添加“显示:块;” “最大宽度:100%;” 和“高度:自动;” 也一样,但这并没有改变任何东西。添加 !important 也无济于事。我不知道还能尝试什么!
这是我的图像代码(仅适用于行中的这一列):
<div class="col-sm-4 nopadding">
<a href="index.html"><img src="images/logo6.png" class="img-responsive logoplacement center-block" alt="Logo"></a>
</div>
和CSS:
.logoplacement {
padding-bottom: 20px;
padding-top: 20px;
padding-left: 35px;
vertical-align: middle;
}
.logoplacement img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
我能做些什么?
更新:
媒体查询:
@media (max-width: 780px) {
.logoplacement img{
max-width:80% !important;
}
}