响应问题 - 导致宽度问题的图像

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类添加到图像中，以便它们可以适应容器。

  

Bootstrap 3中的图像可以通过添加响应友好   .img-responsive类的。{这会将max-width: 100%;，height:auto;和display: block;应用于图像，以便它可以很好地扩展到父元素。