автоматическое масштабирование фонового изображения - PullRequest
Новая
       27

автоматическое масштабирование фонового изображения

0 голосов
/ 03 октября 2018

Я хочу, чтобы изображение исчезло, а другое изображение появилось в том же месте с таким же размером при наведении.Поэтому я скрываю оригинальное изображение и вместо этого создаю фоновое изображение.Проблема: фоновое изображение не масштабируется автоматически.Если я не установил конкретную высоту, у нее нет высоты (значит, изображение не видно).

enter image description here Вы можете увидеть проблему здесь, если прокрутить немного вниз: 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;}

1 Ответ

0 голосов
/ 03 октября 2018

Используйте непрозрачность вместо отображения на изображении.Тогда вам не нужно устанавливать высоту: 

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