我正在尝试创建一个包含很多图层的动画图片。
为了在不同的屏幕上获得正确比例的图像，我使用covercss 属性值（我已经尝试过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/ https://jsfiddle.net/koljada/c08qdw1m/
首先，我不得不说，你的鸟类图像比鸟类本身大得多（很多周围填充），因为我看到整个图像是 2048/1934...
无论如何，当你使用
object fit:cover he crop;
用于保存比例的图像。你可以使用
object-fit:scale-down;
通过缩小图像直到进入父空间来保存比例。我在这里添加一个关于它如何工作的快速示例：
希望这是您所寻找的..
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
