css - 背景图像自动缩放

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