I am experiencing an issue with resizing a gif that I am trying to display on my screen. Here is the code snippet:
import broomAndText from './ezgif.com-video-to-gif-3.gif';
import './spinner.css';
function myGif() {
return <html><body><div class="imgContainer"><img src={broomAndText} alt="broomAndText"/></div></body></html>
}
export default myGif;
In my CSS file, I have included the following styling:
.imgContainer {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
The layout appears fine on desktop screens, as shown in the attached image below. https://i.sstatic.net/4IhZT.png
However, the gif does not resize properly on mobile devices, as seen in the second attached image: https://i.sstatic.net/t2CXc.png
I am unsure of how to resolve this issue. Any assistance would be greatly appreciated. Thank you!