Question

图像无法调整以填充容器的右侧。右侧只有一个白色空间。这是我的代码。

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-12">
     <img src="../images/Hero-1.png" alt="Hero-1" width="1170" height="601"class="img-responsive1"></div>
   </div>
 </div> 


.img-responsive1 {
    col: col-lg-12 col-md-12;
    margin-left: -15px;
    margin-right: -15px;
    width: 100%;
    margin-top: -21px;
}

Answer 1

您需要从列中删除图像和填充的负边距。

此外，您无需在img标记中指定图像的宽度，因为您在css中将其指定为100％。

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <img src="../images/Hero-1.png" alt="Hero-1" height="601" class="img-responsive1">
    </div>
  </div>
</div> 


.img-responsive1 {
    width: 100%;
}

.col-lg-12, .col-md-12 {
  padding: 0px;
}

Answer 2

我不确定您对所有这些负边距（不良做法）做了什么，但如果您希望图像填充容器宽度的100％，则可以执行以下操作：

body {
  margin: 0;
}
.img-responsive1 {
    width: 100%;    
}

Answer 3

它是12列网格。每个类（网格）必须有边距0.

图像不会调整为仅填充右侧容器的宽度

3 个答案: