：Bootstrap .img響應圖像在FireFox中不響應

Question

我的使用Bootstrap 3.3.5構建的網站包含我想響應的圖像，因此我為它們分配了.img響應類。 但是，它們在Firefox中沒有響應（當我將窗口調整為較小的尺寸時，圖像不會變小，從而出現滾動條）。 在Internet Explorer中，它可以正常工作。 我沒有嘗試過任何其他瀏覽器來了解可以通過添加“ width：100％;”來修復的錯誤。 但這並不能解決我的問題（唯一要做的是，當我縮小窗口時使圖像變大，以便包含該列的列是該行中的唯一一個。隨着我繼續做，它再次變小窗口變小了，但是當它的大小適合大屏幕時，滾動條又出現了。我嘗試在html標簽中添加“ width：100％;”，並嘗試將其添加到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;
  }
}

Answer 1

要使圖像在Firefox上響應，只需刪除顯示塊屬性

要使圖像的縮放比例不超過其實際寬度，只需刪除100％width屬性，僅保留max width屬性即可。 它將使圖像增長到其實際大小，而不是更多。

為了縮小圖片（甚至比自動生成的圖片還要小），請將以下CSS放入媒體查詢中。

 img { max-width: 80%; } 

將您的媒體查詢更新為

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

您的img具有logoplacement類，並且您應用CSS的方式就像有一個稱為logoplacement的父類，並且img位於其中，這是錯誤的