背景图像自动缩放

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

背景图像自动缩放

background image auto scale

css

background-image

hover