如何防止图像被裁剪

Question

我试图创建一个包含很多图层的动画图片。 为了在不同的屏幕上显示具有正确比例的图像，我使用cover css属性值（我已经为图像object-fit和背景图像background-size尝试了它。这就是为什么我的宽屏幕图像被浏览器歪曲的原因。

问题是我的图层在动画过程中被变换（主要是旋转和移动），因此有时会看到裁剪后的图像。

请参阅下面的示例。

如何预防？还是有其他一些技术？

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

目前我有这个：https://jsfiddle.net/koljada/c08qdw1m/

Answer 1

可以使用overflow: hidden; position: relative的容器div裁剪图像，因此您可以使用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>

Answer 2

首先，我必须说你的鸟类形象比自己的鸟类（许多填充物）大得多，因为我看到整个图像是2048/1934 ......

无论如何，当你使用

时

object fit:cover he crop;

图像保存比例。你可以用

object-fit:scale-down;

用于按比例缩小图像比例直到他进入父空间。我在这里添加一个关于它如何工作的快速例子：

希望这是你搜索的内容..

Answer 3

您可以使用overflow: hidden; position: relative在使用容器div后裁剪图像，并在图像上使用position: absolute来放置图像。