Как предотвратить обрезку изображений - PullRequest
Новая
       4

Как предотвратить обрезку изображений

0 голосов
/ 24 апреля 2018

Я пытаюсь создать анимированную картинку, которая содержит много слоев. Чтобы изображения с правильными пропорциями отображались на разных экранах, я использую значение свойства cover css (я пробовал как для object-fit для изображений, так и для background-size для фоновых изображений). Вот почему мои изображения на широком экране обрезаются браузером.

Проблема в том, что мои слои трансформируются (в основном вращаются и перемещаются) во время анимации, поэтому бывают моменты, когда видно обрезанное изображение.

Пожалуйста, смотрите мой пример ниже.

Как это можно предотвратить? Или это какая-то другая техника? 

body {
  margin: 0;
  padding: 0;
  /*Just to imitate wide screen*/
  width: 1000px;
  height: 450px;
}

#container {
  width: 100%;
  height: 100vh;
  /*Just to imitate wide screen*/
  height: 100%;
  overflow: hidden;
  position: relative;
}

.layer {
  height: 100%;
  position: absolute;
  width: calc(100% + 20px);
}

.layer img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.gulls {  
  animation: gulls ease-in-out 13s infinite alternate;
}

@keyframes gulls {
  from {
    transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
  }
  to {
    transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
  }
}
<div id="container">
  <div class="layer">
    <img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fsky.png?alt=media&token=25033588-d58c-4616-94e9-4974ec4157a4" alt="">
  </div>
  <div class="layer gulls">
    <img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fgulls5.png?alt=media" />
  </div>
</div>

В настоящее время у меня есть это: https://jsfiddle.net/koljada/c08qdw1m/

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

Прежде всего, я должен сказать, что изображение вашей птицы намного больше, чем сами птицы (многие вокруг), так как я вижу, что все изображение 2048/1934 ...

в любом случае, когда вы используете 

object fit:cover he crop;

изображение для сохранения пропорции. Вы можете использовать 

object-fit:scale-down;

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

enter image description here

надеюсь, это то, что вы ищете ..

0 голосов
/ 08 мая 2018

Вы можете использовать overflow: hidden; position: relative, чтобы обрезать изображения после использования контейнера div, и использовать position: absolute на изображениях, чтобы разместить изображение.

0 голосов
/ 02 мая 2018

Изображения могут быть обрезаны с помощью контейнера div с помощью overflow: hidden; position: relative, поэтому вы можете расположить изображение внутри с помощью position: absolute. Атрибут top и left css изображения должен иметь отрицательное значение.

Точные значения изображения можно найти с помощью функций синуса и косинуса. 

body {
  margin: 0;
  padding: 0;
  /*Just to imitate wide screen*/
  width: 200px;
  height: 100px;
}

#container {
  width: 100%;
  height: 100vh;
  /*Just to imitate wide screen*/
  height: 100%;
  overflow: hidden;
  position: relative;
}

.layer {
  height: 100%;
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 20px);
}

.layer img {
  height: 150%;
  width: 150%;
}

.gulls {  
  animation: gulls ease-in-out 3s infinite alternate;
}

@keyframes gulls {
  from {
    transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
  }
  to {
    transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
  }
}
<div id="container">
  <div class="layer gulls">
    <img src="http://via.placeholder.com/350x150/000000" />
  </div>
</div>
...