如何防止图像被裁剪-前端问题

How to prevent images from being cropped(如何防止图像被裁剪)

本文介绍了如何防止图像被裁剪的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建包含许多层的动画图片。为了让图像在不同的屏幕上具有合适的比例，我使用了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/