Question

我正在使用引导卡https://getbootstrap.com/docs/4.0/components/card/来显示图像，问题是在引导模板上，它只是增加了一个边距，如果有人将图像仅保留在div的整个宽度上，我想一个解决方案，将不胜感激，在此先感谢。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<!-- card documentation https://getbootstrap.com/docs/4.0/components/card/ -->

<section >
	
	<div class="card text-center">
  <div class="card-header" style="background-color:white">
  
   
     Card Header
     
  <div class="card-body">
  <center>
  
  <!-- img I need full page size on card body -->
<div class="view overlay zoom">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="smaple image">
    </div>  </center>
  
    <p class="card-text">card description</p>
    <div class="card-footer text-muted" style="background-color: white">card footer</div>
   
</section>

Answer 1

要使图像的.card-body的宽度为100％，就像在图像上添加.w-100类以使其始终保持100％的宽度一样简单。

<div class="card text-center">
    <div class="card-header" style="background-color:white">
        Card Header
    </div>
    <div class="card-body">
        <center>
            <div class="view overlay zoom">
                <img src="" class="img-fluid w-100" alt="smaple image">
            </div>
        </center>
        <p class="card-text">card description</p>
        <div class="card-footer text-muted" style="background-color: white">card footer</div>
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/qh6o2gyz/3/

Answer 2

您可以使用bootstarp类p-0从卡中删除填充，并在图像上w-100上删除100%的全宽度

请参阅代码段：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<section>

  <div class="card text-center p-0">
    <div class="card-header" style="background-color:white">
      Card Header
    </div>
    <div class="card-body p-0">
      <div class="view overlay zoom">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid w-100" alt="smaple image">
      </div>
    </div>
    <p class="card-text">card description</p>
    <div class="card-footer text-muted" style="background-color: white">card footer</div>
  </div>
</section>

引导卡将img放在页面的全尺寸宽度上

2 个答案: