Preserving Aspect Ratio Of Images Displayed Inside @keyframes Options

[gurbanoglu]

Hi everyone.

First I want to explain that I have successfully gotten three different background images to be displayed on a web page and automatically change with the CSS animation tools.

I wanted to clarify as to whether the aspect ratio for each of my images is being preserved? I have heard that if you give either the 'height' or 'width' a percentage, but do not give both a percentage, then the aspect ratio of the image is automatically preserved. Is this the case for my CSS code below? Thank you.

The following is the CSS styling:
<style>
body, html {

height: 100%;
margin: 0;

}

.change-background {

height: 115%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation-name: ChangeBackground;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 15s;
/* animation: change 30s infinite normal; */

}

@keyframes ChangeBackground {

0% {

background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/avtovo-station.jpg");

}
50% {

background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/kirovsky-zavod.jpg");

}
100% {

background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/zvenigorodskaya.jpg");

}

}
</style>

This post has been edited by gurbanoglu: Jul 27 2022, 03:35 PM

[Christian J]

Hi!

I have heard that if you give either the 'height' or 'width' a percentage, but do not give both a percentage, then the aspect ratio of the image is automatically preserved.

Yes, that's my understanding of https://www.w3.org/TR/css-backgrounds-3/#the-background-size "An ‘auto’ value for one dimension is resolved by using the image’s natural aspect ratio and the size of the other dimension" (where "auto" is the default if a dimension value is unspecified).

Is this the case for my CSS code below?

The code example doesn't use height or width for the background-image itself, instead it gives the HTML element ".change-background" a height (do you really want it to be 115% of the HTML and BODY elements' height?). The actual background-image then uses:

CODE

background-size: cover;

which will "Scale the image, while preserving its natural aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area" (my bolding). In practice this means the image will be made large enough to cover ".change-background" even if parts of the image become cropped. If you instead use:

CODE

background-size: contain;

the image will be made small enough to fit inside ".change-background". You may then also want to use:

CODE

background-repeat: no-repeat;

to prevent the image from tiling.