Right off the bat: using scale() is not a viable option.
Is there a way to dynamically animate my image, which has been scaled to 700% in width or height, back to its original CSS dimensions of auto width and height? Below are the actual dimensions of my image ( .backone > img ):
Width: 1024px Height: 570px
The CSS for the image is as follows:
/*this matches the window width and height*/
.backone {
width: 100%;
height: 100%;
z-index: 6;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
/** original CSS dimensions **/
.backone > img {
position: absolute;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
top: 0px;
bottom: auto;
transform: translateX(-50%);
}
While hidden, I added either a height of 700% or a width of 700% to the .backone > img during the script execution, depending on whether the window width is greater than the height.
Now, when the image is displayed, I want to animate it back to its "original CSS" dimensions as indicated above.
Here's what I've tried so far:
I attempted to capture the image's dimensions before applying the 700% scaling, but since the image was hidden at that time, it had not yet rendered in the DOM.
CSS animations were explored, but they only allowed me to revert the width or height back to 100%, resulting in distortion of the image.
I made multiple attempts with jQuery animate to calculate the correct dimensions, but encountered difficulties in getting the calculations right.
What calculations can be used to return the image to its original dimensions?