CSS卡片Hover时图片填充指定区域的布局问题求助

需求 #

鼠标悬停卡片时，显示一张图片，填充<hr>标签下方、卡片footer上方的内容区域，且图片不会溢出。当前遇到的问题：

• 给.card-content设置overflow:hidden，图片会被段落内容的高度裁剪
• 不设置overflow:hidden，图片会超出盒子范围
  希望.card-content能填充从段落到card footer的剩余区域，让悬停图片刚好填满该区域且不溢出，也接受给.card-content设置高度并裁剪图片底部的方案。

解决方案 #

通过以下CSS修改实现需求：

1. 给.card-content添加overflow:hidden，确保超出区域的内容被裁剪
2. 调整预览图片的定位和尺寸，让它完全占满.card-content的空间
3. 悬停时隐藏原有文字内容，避免和图片重叠

修改后的完整代码 #

<style type="text/css">
body{
  padding: 2rem 0rem;
}

.card-body{
  padding: 1.25rem 0px;
}

hr {
  margin-left: 1.25rem;
}
.card-title, .card-subtitle, .card-text  {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.card {
  height: 410px;
  display: flex;
  flex-flow: column;
}

.card-content {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden; /* 新增：裁剪溢出内容 */
}

.preview_image {
  display: none;
  width: 100%;
  height: 100%; /* 新增：占满父容器高度 */
  position: absolute;
  top: 0;
  left: 0; /* 新增：确保左对齐 */
  object-fit: cover; /* 改为cover，填充容器，裁剪多余部分；若要完整显示用contain */
}

.card:hover .preview_image {
  display: block;
}
/* 新增：悬停时隐藏文字 */
.card:hover .card-subtitle,
.card:hover .card-text {
  display: none;
}
</style>
<div class="container">
  <div class="row">
    
    <!-- Card 1 -->
    <div class="col-lg-3 col-md-6 mb-5">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">1 Line</h4>
          <hr class="my-3" style="width:25px;border-top:3px solid #000">
          <div class="card-content">
          <h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
          <p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
             <img class="preview_image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Peacock_by_Nihal_jabin.jpg/220px-Peacock_by_Nihal_jabin.jpg" />
        </div>
        </div>
        <div class="card-footer text-danger">
          Test Bottom
        </div>
      </div>
      </div>
    
    <!-- Card 2 -->
    <div class="col-lg-3 col-md-6 mb-5">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">This is a test of 2 Lines of Text</h4>
          <hr class="my-3" style="width:25px;border-top:3px solid #000">
          <div class="card-content">
          <h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
          <p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
                                <img class="preview_image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Peacock_by_Nihal_jabin.jpg/220px-Peacock_by_Nihal_jabin.jpg" />
          </div>
        </div>
        <div class="card-footer text-danger">
          Test Bottom
        </div>
      </div>
    </div>
    
        <!-- Card 3 -->
    <div class="col-lg-3 col-md-6 mb-5">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">This is a test with 3 lines of text to display</h4>
          <hr class="my-3" style="width:25px;border-top:3px solid #000">
          <div class="card-content">
                                <img class="preview_image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Peacock_by_Nihal_jabin.jpg/220px-Peacock_by_Nihal_jabin.jpg" />
          <h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
          <p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>

          </div>

        </div>

        <div class="card-footer text-danger">
          Test Bottom
        </div>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• .card-content添加overflow:hidden：确保图片不会超出该容器范围
• .preview_image设置height:100%和left:0：让图片完全覆盖.card-content的宽高
• object-fit:cover：让图片按比例填充容器，多余部分被裁剪；如果需要完整显示图片，可改为object-fit:contain
• 新增悬停隐藏文字的样式：避免文字和图片重叠，让图片完全填充目标区域

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