如何使图像覆盖html中的完整部分

Question

我的HTML中有一个图像部分，如下所示

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <a href="<?php echo base_url('ramoji_film_city/ramoji_weekend_dj_parties');?>" target="_blank"><img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;"></a>
    </div>
  </div>
</div>

图像未覆盖整个部分。周围有一些空白。我该如何摆脱呢？

 如何从左到右完全覆盖图像？

Answer 1

您正在使用引导程序，并且.row类的填充为15px，这就是图像周围有空白的原因。将.no-padding类添加到<div class="row"> DOM元素中，并在CSS中设置以下规则以覆盖Bootstrap规则：

.row.no-padding {
    padding: 0;
}




<div class="container-fluid">
    <div class="row no-padding">
      <div class="col-md-12">
        <a href="<?php echo base_url('ramoji_film_city/ramoji_weekend_dj_parties');?>" target="_blank"><img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;"></a>
      </div>
    </div>
</div>

Answer 2

请使用此代码，希望它对您有用。

谢谢

<div class="container-fluid" style="padding:0px;">
        <div class="row">
          <div class="col-md-12">
            <a href="<?php echo base_url('ramoji_film_city/ramoji_weekend_dj_parties');?>" target="_blank"><img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;" width="100%"></a>
          </div>
        </div>
    </div>