Подгонка фонового изображения без обрезания / растяжения изображения

Question

Я работаю над этим проектом, где мне нужно заменить фоновое изображение родительского элемента div при наведении указателя на каждый дочерний элемент div / столбцы.Все функции работают хорошо, за исключением того, что фоновое изображение, которое я устанавливаю, обрезается или выглядит растянутым.Я перепробовал много примеров и похожих вопросов из-за переполнения стека, и ни один из них не помог решить проблему растянутого изображения или проблемы обрезки. Я пробовал повторять фон и позиционирование фона и т. д.

  background-image: url(https://www.dropbox.com/s/3pk8xl9lh6hl4x8/banner1.jpg?dl=1);
  background-size: cover;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

что я делаю не так.Вот мой код в скрипке https://jsfiddle.net/jaisil007/4qxh5nrz/3/

Answer 1

Вы можете попробовать это вместо опции background-size: cover;.

background-size: 100% 330px; /* fit for the size of the div... full width and 330px height */

Answer 2

вы попробуйте следующее css:

    background-size: cover;
background-position: center center;
background-repeat: no-repeat;

Answer 3

Из того, что я вижу на скрипке, похоже, что код работает нормально до определенного момента.Если я изменю размер панели дисплея до полного размера, я вижу все изображение.Я могу медленно изменить его размер и увидеть, что он сам изменяет размеры, когда окно становится меньше, но при 767px оно растягивается обратно.

Я бы сказал, что вам, вероятно, нужно иметь уменьшенную версию этого изображения с шириной 767 пикселей и обновить ваш максимальный размер: 768 медиазапросов, чтобы заменить исходное изображение меньшим.