背景图像的大小不居中或覆盖？

Question

当我使用图像作为背景图像时，它仅显示图像的顶部，但不覆盖div。

这是CSS代码：

 .background-image {
      transform: scale(1.1);
      transition: transform 6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
      background-position: center center;
      // background-repeat: no-repeat;
      background-size: cover; // cover did not work.
    }

这是它的样子

这就是我想要的样子。这是我将鼠标悬停时的图片。

Answer 1

您可以尝试以下方法：

img.background-image {
      position: absolute;
      left: 0;
      object-fit: cover;
      width:100%;
      height:100%;
      transform: scale(1);
    }
.bgImage{
 position: relative;
 height: 300px;
 width: 300px;
 overflow: hidden;
}
.bgImage:hover img{
 transform: scale(1.15);
  transition: transform 1s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}

<div class="bgImage">
<img class="background-image" src ="https://dev.santafe.com/wp-content/uploads/2020/05/morrison-mccartney-prince-auction.jpg"/>
</div>