Question

我使用Bootstrap 3.3.5构建的网站包含我想要响应的图像，因此我将.img响应类分配给它们。但是，它们在Firefox中没有响应（当我将窗口调整为较小的尺寸时，图像不会变小，因此会出现滚动条）。在Internet Explorer中，它工作得很好。我没有尝试过任何其他浏览器我读到了可以通过添加“width：100％;”修复的bug。但这并没有解决我的问题（它唯一能做的就是当我让窗口变小时使图像更大，以便包含它的列是该行中唯一的一个。当我继续制作时，它会再次变小窗口较小，但当它的大小我希望它用于更大的屏幕时，滚动条会再次出现。我尝试添加“宽度：100％;”内联到html标签，我尝试将其添加到我的CSS中。我也尝试添加“display：block;” “最大宽度：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;
  }
}

Answer 1

在firefox上使图像响应，只需删除显示块属性

要使图像的缩放比实际宽度更大，只需删除100％宽度属性，只需保留最大宽度属性即可。它会使图像增长到实际尺寸，而不是更多。

使图像变小（甚至比自动变小），将以下CSS放入媒体查询中。

img {
  max-width: 80%;
}

将媒体查询更新为

@media (max-width: 780px) {
  .logoplacement {
    max-width: 80% !important;
  }
}

你的img有logoplacement类，你应用CSS的方式就像有一个名为logoplacement的父类，img在里面，这是不正确的

：Bootstrap .img响应图像在FireFox中无响应

1 个答案: