Preserving Aspect Ratio Of Images Displayed Inside @keyframes |
Preserving Aspect Ratio Of Images Displayed Inside @keyframes |
gurbanoglu |
Jul 27 2022, 03:29 PM
Post
#1
|
Group: Members Posts: 1 Joined: 27-July 22 Member No.: 28,466 |
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%;} .change-background { height: 115%; } @keyframes ChangeBackground { 0% {background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/avtovo-station.jpg");} } </style> This post has been edited by gurbanoglu: Jul 27 2022, 03:35 PM |
Christian J |
Jul 28 2022, 10:48 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
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). QUOTE 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. |
Lo-Fi Version | Time is now: 27th April 2024 - 10:15 AM |