鼠标悬停时如何让图片限制在div容器内显示？

我设置了若干元素，当鼠标悬停在这些元素上时，图片需在div容器中显示。当前问题是，图片显示时不会在div容器边缘被截断，而是超出容器向下延伸。请问如何实现图片被限制在div容器范围内显示？

HTML代码 #

<div class='shop-card'>
  <div class="title">
    <?php echo "$thisComposer $thisTitle"; ?>    
  </div>
  <div class="desc">
    <div>
      <img src="img/genre.png" alt="">
      <?php echo "$thisGenre"; ?>
    </div>
    <div>
      <img src="img/instrument.png" alt=""> 
      <?php echo "$thisInstrument1"; ?>
      <?php echo "$thisInstrument2"; ?>
    </div>
    <div>
      <img src="img/pen.png" alt=""> 
      <?php echo "$thisArrangement"; ?>
    </div>
    <div>
      <?php echo "$thisDifficulty"; ?>
    </div>
  </div>
  <div class="product">
    <img src="img/<?php echo "$thisSheet"; ?>"></img>
  </div>
</div>

CSS代码 #

.shop-card {
  margin: 10px;
  width: 350px;
  height: 300px;
  background: #f5f5f5;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
  transition: 1s;
}
.shop-card:hover {
  cursor: pointer;
  scale: 1.02;
}
.shop-card:hover > .product img {
  display: block;
}
.shop-card:hover > .desc {
  display: none;
}

.product img {
  width: 100%;
  position: relative;
  display: none;
}

解决方案 #

只需要修改两处CSS样式，就能让图片被限制在容器范围内：

1. 给.shop-card添加溢出控制和盒模型设置 #

.shop-card {
  margin: 10px;
  width: 350px;
  height: 300px;
  background: #f5f5f5;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
  transition: 1s;
  overflow: hidden; /* 核心：截断超出容器的内容 */
  box-sizing: border-box; /* 让padding包含在设置的宽高内，避免容器实际尺寸变大 */
}

2. 优化图片的缩放与显示方式 #

根据你的需求选择以下一种设置：

• 若要完整显示图片（容器内可能留空）：

.product img {
  width: 100%;
  height: 100%; /* 让图片高度适配容器 */
  position: relative;
  display: none;
  object-fit: contain; /* 保持图片比例，完整显示 */
}

• 若要图片填满容器（超出部分裁剪）：

.product img {
  width: 100%;
  height: 100%; /* 让图片高度适配容器 */
  position: relative;
  display: none;
  object-fit: cover; /* 保持比例，裁剪多余部分填满容器 */
}

效果说明 #

• overflow: hidden：直接隐藏所有超出.shop-card边界的内容，彻底解决溢出问题。
• box-sizing: border-box：确保容器的padding不会额外增加宽高，保证容器尺寸严格为350px×300px。
• object-fit：避免图片拉伸变形，同时适配容器尺寸，根据需求选择显示策略即可。

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