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类将调整图像的大小，但只能调整到其最大尺寸。

您可以修复2件事情中的1件。

（首选方法）为所需的最大尺寸屏幕选择宽度正确的图像。（大多数情况下为1920像素）
您可以在图像中添加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>

Answer 2

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>

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

2 个答案: