響應問題 - 影響寬度的圖像問題

Question

我目前正致力於使http://preview.j64e7zzvo82p4x6r4fdjze6piimmfgviwsruf9j89pidaemi.box.codeanywhere.com/響應，並且由於某些原因，圖像太大而導致身體寬度大於視口。

只要屏幕縮小至991px以下的任何尺寸，問題就會開始。

如果我加載沒有圖像的頁面，那麼它很好，但我目前通過使用（display：none;）隱藏圖像，當屏幕大小適用於移動設備時。所以我不明白爲什麼它還在發生。

有什麼想法？

Answer 1

對於要在引導程序中響應的圖像，您需要向它們添加「img-responsive」類。那麼他們會很好地適應。

Answer 2

的事情是，圖像是900px寬，以避免需要一個％的寬度設定爲圖像，例如：

.online-store-image img{ 
    max-width:100%; 
    height: auto; 
    display: block; 
} 

或者，如果你想隱藏圖像的休息和保養相同的大小，您可以設置：

.online-store-image{ 
    overflow: hidden; 
} 

在你使用Bootrstrap，所以你可能要到img-responsive類添加到您的圖像這種情況下，使他們能夠適應容器。

引導程序3中的圖像可以通過.img-responsive類的添加 進行響應友好。這適用於max-width: 100%;,height:auto;和display: block;圖像，以便它可以很好地縮放到父元素。