jquery - 如何使用 Bootstrap 3 使图像全宽

Question

我似乎无法完成这项工作，在桌面模式下我的图像停留在屏幕中间，即使我删除了 .container-fluid 上的填充，它仍然停留在中间，当我调整浏览器大小时，它会占据我想要的完整宽度，但不是在桌面模式下。

这是代码

<div class="container-fluid">
    <div class="row">
        <img src="img/imgBG.jpg" alt="BGDentist" class="img-responsive" />
    </div>
</div>

CSS

.img-responsive {
    vertical-align:middle;
    margin: 0 auto;
}

.container-fluid {
    overflow-x: hidden;
}

Answer 1

如果没有可验证的示例，我猜测这是因为您的图像不够大，无法以较大的视口(viewport)尺寸扩展到其容器中。

典型的响应式图像类如下所示:

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

max-width 属性限制图像在某个点之后扩展。当设置为 100% 时，图像的最大宽度将是其自然宽度。如果您有 400px 宽图像，则当其容器元素为 400px 或更小时，该图像将扩展/收缩。如果容器超过 400 像素，它将停止扩展。

使用 max-width: 100%; 的原因是为了帮助保持图像清晰。您可以使用 width: 100%; 代替 max-width，但一旦拉伸(stretch)超出其原始分辨率，您的图像就会变得模糊和像素化。

以下是我认为您正在经历的示例。下面这个示例是另一个使用 width: 100%; 的示例。

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
img {
  display: block;
  height: auto;
  max-width: 100%;
}

<div class="container">
  <img src="http://placehold.it/600x200/">
</div>

<div class="container">
  <img src="http://placehold.it/1200x200/ff0">
</div>

容器大于图像的原生 400px 宽度后的像素化。

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
img {
  display: block;
  height: auto;
  width: 100%;
}

<div class="container">
  <img src="http://placehold.it/400x200/">
</div>