Блог

У меня есть следующий div:

 .bg {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-image: url("img/bg.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  animation: shrink-bg-img 1.5s;
}

@keyframes shrink-bg-img {
  0% {
    background-size: 110%;
  }
  100% {
    background-size: 100%;
  }
}
  

Он отлично работает при некоторой ширине окна просмотра. Я вообще не вижу краев изображения.
Но это не работает нормально при некоторой ширине окна просмотра, и я вижу края изображения во время анимации. (изображение соответствует ширине, поэтому будут показаны верхний и нижний края. Изображение намного меньше, а затем, в конце концов, становится большим размером обложки)

Я попробовал background-size: auto 100%; и background-size: auto 110%; . Это приводит к противоположным результатам. Я вижу края изображения для тех тестов, которые я не вижу в первом случае. И я не вижу краев изображения для тех тестов, которые я вижу в первом случае.

Прямо сейчас я могу это исправить, используя @media и использовать auto в некоторой ширине носителя и не использовать auto в некоторой ширине носителя. Но мне нужно провести много тестов, чтобы убедиться, что все работает правильно.

Мне интересно, есть ли более простое решение этой проблемы.

Извините за мои английские слова, надеюсь, это имеет смысл.

Большое вам спасибо.