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/
Images can be cropped with a container div with overflow: hidden; position: relative
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>
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..
You can use overflow: hidden; position: relative
overflow: hidden; position: relative
to crop your images after using container div, and using position: absolute
at the images to place the image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.