本文介绍了如何防止图像被裁剪的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建包含许多层的动画图片。
为了让图像在不同的屏幕上具有合适的比例，我使用了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/
推荐答案
首先，我必须说，您的鸟类图像比鸟类本身(周围有很多填充物)要大得多，因为我看到的整个图像是2048年/1934年……
无论如何，当您使用
object fit:cover he crop;
保存比例的图像。您可以使用
object-fit:scale-down;
For通过缩小图像，直到他进入父空间来保存比例。我在这里添加一个简单的示例，说明它是如何工作的：
希望这就是您要搜索的内容..
这篇关于如何防止图像被裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！