:Bootstrap .img 响应图像在 FireFox 中没有响应

Question

我用 Bootstrap 3.3.5 构建的网站包含我想要响应的图像，因此我为它们分配了 .img-responsive class。但是，它们在 Firefox 中没有响应（当我将 window 调整为更小的尺寸时，图像不会变小，因此会出现滚动条）。在 Internet Explorer 中，它工作得很好。我还没有尝试过任何其他浏览器我读到了可以通过添加 "width: 100%;" 来修复的错误，但这并不能解决我的问题（它唯一做的就是在我缩小 window 时使图像变大，以便包含它的列是该行中唯一的一个。随着我继续使 window 变小，它再次变小，但是当它达到我想要的大屏幕尺寸时，滚动条再次出现。我尝试将 "width: 100%;" 内联添加到 html 标记，然后尝试将其添加到我的 CSS。我也尝试添加 "display: block;" "max-width: 100%;" 和 "height: auto;"，但这并没有改变任何东西。添加 !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 class，你应用 CSS 的方式就像有一个名为 logoplacement 的父 class 并且 img 在里面，这是不正确的

:Bootstrap .img 响应图像在 FireFox 中没有响应

:Bootstrap .img-responsive images are not responsive in FireFox

html

css

responsive-design

twitter-bootstrap

responsive-images