How to prevent images from being cropped

Question

I'm trying to create an animated picture which contains a lot of layers. In order to have images with right proportions on different screens I use cover css property value(I've tried it for both object-fit for images and background-size for background images). That's why my images on wide screen are croped by the browser.

The problem is that my layers are transformed(mostly rotated and moved) during the animation so there are moments when it is seen the cropped image.

Please see my example below.

How it can be prevented? Or it there some other technique?

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>

Currently I have this: https://jsfiddle.net/koljada/c08qdw1m/

Answer 1

first of all i have to say that your birds image is a lot bigger then the birds therself (many padding around) as i see the whole image is 2048/1934...

anyway, when you use

object fit:cover he crop;

the image for save the proportion. you can using

object-fit:scale-down;

for save the proportion by scale down the image until he come inside the parent space. i add a quick exemple about how it works down here:

hope it is what you search for..

Answer 2

Images can be cropped with a container div with overflow: hidden; position: relative, So you can position the image inside with position: absolute. The top and left css attribute of the image has to be set a negative value.

The image exact values can be found by using sine and cosine functions.

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>