引导卡将图像放在页面的全尺寸宽度上答案

【问题标题】：Bootstrap card put img on full size width of the page引导卡将图像放在页面的全尺寸宽度上
【发布时间】：2019-07-09 18:02:34
【问题描述】：

我正在使用引导卡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>

【问题讨论】：

"保持 div 的全宽"。你指的是哪个div？ <div class="view overlay zoom" /> 还是 <div class="card" />？顺便说一句，在您的 HTML 布局中，.card-body 嵌套在 .card-header 中。
div 是 '
'
<div class="card-body" /> 有默认的 1.25 rem 填充（不是边距）。您不关心填充，只希望图像绝对 100% 宽度，或者您确实想要容纳填充？
是的，如何容纳填充？

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以使用 bootstarp 类 p-0 删除卡上的填充和图像上的 w-100 以获取 100% 的全宽

见代码sn-p：

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

【讨论】：

很好，但我仍然有页边距如何解决这个问题？
您希望卡片占据全宽？
是的，只有图像完全一样，但如果让所有卡片全宽没有问题
既然你想让卡片占据整页，你不需要mr-auto ml-auto，我只是将它添加到卡片中心用于演示目的

【解决方案2】：

要使图像宽度为.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/

【讨论】：

谢谢，它工作正常，但我仍然在 html 上看到空白页边距，如何解决这个问题？