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

如果没有可验证的示例，我会猜测它是因为您的图像不够大，无法扩展到更大视口大小的容器中。

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

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

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

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

以下是我认为您遇到的事例。下面的示例是另一个使用width: 100%;。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用bootstrap 3使我的图像全宽

1 个答案: