背景图像自动缩放

Question

我希望图像消失，而另一个图像则悬停在相同大小的相同位置。因此，我隐藏原始图像并创建背景图像。问题：背景图像无法自动缩放。如果我不设置特定的高度，则它没有高度（意味着看不到任何图像）。

如果向下滚动一点，您可以在这里看到问题：https://www.ergotopia.de/

我当前的CSS：

.bestsellerkissen:hover .hoverkissen{
    background: url(example.jpg) no-repeat center;
    height: 240px;
    background-size: 100% 100%;
    display: block;
    border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{display:none;}

Answer 1

使用不透明度而不是显示在图像上。然后，您无需设置高度：

.bestsellerkissen:hover .hoverkissen{
    background: url(example.jpg) no-repeat center;
    background-size: 100% 100%;
    display: block;
    border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{
    opacity: 0;
}