Как предотвратить обрезку изображений
Я пытаюсь создать анимированное изображение, содержащее много слоев.
Чтобы изображения с правильными пропорциями отображались на разных экранах, я использую значение свойства 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/
Вы не можете покрыть экран любого размера без одного из двух: обрезки или искажения. Вот достойный результат: jsfiddle.net/websiter/4jedtb3n. Мне кажется.
Ответы 3
Изображения можно обрезать с помощью контейнера div с overflow: hidden; position: relative, поэтому вы можете разместить изображение внутри с помощью position: absolute. Для атрибутов css top и left изображения необходимо установить отрицательное значение.
Точные значения изображения можно найти с помощью функций синуса и косинуса.
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>Во-первых, я должен сказать, что ваше изображение птиц намного больше, чем самих птиц (много отступов вокруг), поскольку я вижу, что все изображение 2048/1934 ...
в любом случае, когда вы используете
object fit:cover he crop;
изображение для сохранения пропорции. вы можете использовать
object-fit:scale-down;
для сохранения пропорции путем уменьшения изображения до тех пор, пока он не войдет внутрь родительского пространства. Я добавляю здесь краткий пример того, как это работает:
надеюсь, это то, что вы ищете ..
Вы можете использовать overflow: hidden; position: relative для обрезки изображений после использования контейнера div и использования position: absolute в изображениях для размещения изображения.
Ваши изображения уже обрезаны даже без преобразования, поэтому ни преобразование, ни анимация на самом деле не связаны с вашей проблемой. На вашем месте я бы переосмыслил все это, вплоть до создания изображения, хотя я не уверен, что здесь должно быть лучше всего. Но если вам нужно быстрое исправление, вы можете поиграть со свойством объект-позиция.