如何在Bootstrap中将图片适配指定div容器

我来帮你搞定这个图片适配的问题！你遇到的情况是：加了max-width:100%和max-height:100%但图片还是没填满外层的17em×17em容器，原因是这两个属性只是限制图片的最大尺寸不会超出父容器，但不会强制图片填满整个容器空间——如果图片本身尺寸比容器小，就会留白；如果比容器大，只会缩小到不超过容器，但依然可能无法完全填满。

下面是具体的解决方法，直接修改你的代码即可：

修改后的完整代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="card" style="height: 20em;width: 17em;">
  <!-- 给父容器添加相对定位，确保图片尺寸约束生效 -->
  <div style="height:17em;width:17em;background-color: #5f5f5f; position: relative;">
    <!-- 设置图片宽高占满父容器，并用object-fit控制填充方式 -->
    <img class="card-img-top" src="http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg" style="width: 100%; height: 100%; object-fit: cover;">
  </div>
  <div class="card-body">
    <h3 class="card-title">help me</h3>
    <a href="#" class="btn btn-primary">More Info</a>
  </div>
</div>

关键改动说明 #

• 给图片的父容器添加position: relative：确保图片的尺寸约束严格相对于这个父容器，避免出现意外的布局偏移。
• 给图片设置width: 100%; height: 100%;：强制图片的宽高完全匹配父容器的尺寸，填满整个17em×17em的空间。
• 添加object-fit: cover：让图片保持原有比例，同时裁剪掉超出容器的部分，确保容器被完全填满。如果不想裁剪图片、想要完整显示（可能会留白），可以把cover换成contain。

这样修改后，图片就会完美适配外层的灰色容器啦！

内容的提问来源于stack exchange，提问作者Aditya Tanwar