Bootstrap行内列图片适配问题：无法匹配行高且裁剪失效

你的核心问题是图片的父容器没有明确的高度参考，导致height:100%无法生效，加上Bootstrap列的默认样式影响，才会出现留白或溢出的情况。以下是具体的修复方案：

修复步骤及代码调整 #

1. 调整CSS样式 #

修改你的CSS，补充父容器高度、清除列内边距并确保容器圆角生效：

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
  overflow: hidden; /* 防止图片超出容器圆角 */
}

.hotel-box .col-4 {
  height: 100%; /* 让图片容器高度与行完全对齐 */
  padding: 0; /* 移除Bootstrap列默认的内边距，避免图片与边框间有空隙 */
}

.hotel-box img {
  width: 100%; /* 图片宽度适配列宽 */
  height: 100%; /* 图片高度拉满容器 */
  object-fit: cover; /* 按比例裁剪超出部分，保持图片完整性 */
}

2. 优化HTML结构 #

给包含图片的列添加Bootstrap内置的h-100类，确保它继承行的高度：

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Body -->
<div class="hotel-box">
  <div class="row">
    <div class="col-4 h-100"> <!-- 添加h-100类 -->
      <img src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/279134335.jpg?k=341488f6f4dc7bc8d6232b06730e304ed655bd4a944b1a90eb2ab81ac92a0568&o=&hp=1" alt="酒店图片">
    </div>
    <div class="col-5">
      <h3>Hotel name</h3>
      <p>some info</p>
      <p>room info</p>
      <p>extra info</p>
    </div>
    <div class="col-3">
      <h4>word rating</h4>
      <p>number reviews</p>
      <span>number rating</span>
      <span>BGN price</span>
      <p>per night per person(под числото с дребен шрифт)</p>
    </div>
  </div>
</div>

关键原理说明 #

• h-100 + .col-4 { height:100% }：让图片所在的列高度完全匹配行的高度（行的高度由右侧内容自动撑开）
• object-fit: cover：确保图片按比例填充容器，超出列宽的部分被裁剪，不会变形
• overflow: hidden + padding:0：解决Bootstrap列默认内边距导致的空隙，同时保证图片不会突破容器的圆角

内容的提问来源于stack exchange，提问作者Daria Ugrin