当我悬停时如何将我的图片放入 div 中？

Question

我得到了一些元素，当我将它们悬停时，div 中应该会出现一张图片。现在的问题是，当我的图片出现时，它并没有在div 的结尾被截断。它只是在div 的下方。我怎样才能让它在div 的末尾被截断？

网页格式

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

Answer 1

您可以使用对象适合：

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

object-fit: contain;