Замена существующего вертикально центрированного изображения существующим эффектом Кена Бернса - PullRequest
Новая
       95

Замена существующего вертикально центрированного изображения существующим эффектом Кена Бернса

1 голос
/ 27 мая 2020

У меня есть 2 фрагмента кода, которые отлично работают независимо.

Первый будет центрировать изображение по вертикали и горизонтали независимо от размера браузера. Второй производит эффект Кена Бернса.

Я хотел бы центрировать эффект Кена Бернса по вертикали и горизонтали независимо от размера браузера.

Заранее благодарим вас за ваше время и терпение.

Первый: 

<div class="parent">
    <img class="responsive center" src="https://unsplash.it/900/700">
</div>

------------

parent {
    position: relative;
}

.responsive {
    max-width: 100%;
    max-height: 100%;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
}

Второй: 

<div class="image-wrap">
  <img src="https://unsplash.it/900/700">
</div>

------------

.image-wrap {
    width: 100%;
    height: 50vw;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.image-wrap img {
    width: 100%;
    animation: move 40s ease;
    -ms-animation: move 40s ease;
    -webkit-animation: move 40s ease;
    -0-animation: move 40s ease;
    -moz-animation: move 40s ease;
    position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);    
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
    }
  }

1 Ответ

0 голосов
/ 27 мая 2020

Попробуйте этот код: 

.image-wrap {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.image-wrap img {
    animation: move 40s ease;
    -ms-animation: move 40s ease;
    -webkit-animation: move 40s ease;
    -0-animation: move 40s ease;
    -moz-animation: move 40s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    height: auto;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);    
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
    }
  }
<div class="image-wrap">
  <img src="https://unsplash.it/900/700">
</div>
...