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

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;
}