尽管使用了“img-fluid”类，但图像没有完全响应

Question

我在 img 标签中使用了img-fluid 类，但我的图像没有完全响应。小屏有反应，放大到一定尺寸后就没有反应了。

我已阅读 How to make an image responsive using bootstrap without having it take up the entire width of the division? 和 Bootstrap: img-responsive vs img-fluid 但无法解决问题。

这是我的尝试

HTML：

    <!-- THE HEADER -->
    <div class="container-fluid header">
        AUST CSE
    </div>
    <!-- IMAGE JUST BELOW HEADER -->
    <div class="wrapper" style="background: blue">
        <img src="images2/banner.jpg" class="img-fluid">
    </div>

CSS：

    .wrapper {
        width: 100%;
    }

在较小的屏幕中，页面如下所示： 但是，在更大的屏幕上，图像不会占用 100% 的空间，看起来像这样： 我希望图像占据 100% 的宽度并放大其高度，就像屏幕较小时一样。

Answer 1

img-fluid 使用max-width: 100%;。一旦包含元素的大小与图像的宽度相同或大于图像的宽度，它将停止调整大小。

两种选择：

1) 使用分辨率至少为容器元素最宽宽度的图像。如果您的容器元素的宽度没有固定的顶端（即始终为视口宽度的 80%），则选择一个足够大的图像，以便它在大多数显示器上看起来不错（在大多数常见浏览器上查找统计信息）决议）。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1000">
      </div>
    </div>
    <div class="col-md-8">
      <p>
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
      </p>
  </div>
</div>

2) 覆盖.img-fluid，这样图像的大小就会超出原始分辨率。这里的缺点是图像会变得颗粒状。原始分辨率越小，缩放到大区域时会变得越粗糙。您可以在我的示例中看到文本非常模糊。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}

/* Will override all instances of .img-fluid. */
.img-fluid {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/100x100">
      </div>
    </div>
    <div class="col-md-8">
      <p>
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
      </p>
    </div>
  </div>
</div>

我还在下面提供了一个范围示例，它允许您仅覆盖特定图像以超出其原始分辨率。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}

/* Scoped so that we can target specific images. */
.img-fluid.img-full-width {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid img-full-width" src="https://via.placeholder.com/100x100">
      </div>
    </div>
    <div class="col-md-8">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

Answer 2

如果您希望图像在较大的屏幕上一直跨越页面的宽度，那么您需要确保您的图像宽度与屏幕宽度一样大。

根据您的问题，您的尺寸似乎不够大。 img-fluid 类将调整您的图像大小，但仅限于其最大尺寸。

您可以做 2 件事中的 1 件来修复它。

1. （首选方法）选择具有适合您想要的最大屏幕尺寸的正确宽度的图像。 （大多数时候，应该是 1920 像素）

2. 您可以将width: 100% 添加到您的图像中，这样它就可以覆盖整个页面的宽度。但是，如果图片的宽度小于屏幕，那么图片就不会那么清晰，这就是为什么最好使用尺寸正确的图片。

示例：

• 这是一张尺寸较小的图片（您的问题）：JSFiddle

.container {
  border: 2px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Image</h2>
  <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
  <img class="img-fluid" src="https://cdn-static.denofgeek.com/sites/denofgeek/files/styles/main_wide/public/2015/11/main_0.jpg?itok=k1tyTR75" alt="HL2"> 
</div>

• 这是一张更大尺寸​​（1920 像素）的图片：JSFiddle

.container {
  border: 2px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Image</h2>
  <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
  <img class="img-fluid" src="https://s.aolcdn.com/hss/storage/midas/f8eff2a90708d58814bb4adc93634cbb/205752037/half-life-2-15622-1920x1080.jpg" alt="HL2"> 
</div>