How can I able to render a .gif file into jpeg mobile frame to my Gatsby site

user_13779525 0
Viewed 321

I want to render .gif file to a mobile.png to my gatsby site but not able identify a proper resource for it. could any have an idea how's that possible to render a .gif file to .png mobile frame for Gatsby site

Here's the frame enter image description here

gatsby reactjs css javascript
1 Answers

You have a Working with GIFs guide. You just need to import the .gif asset as any other asset to allow webpack to get the source of that file and display it in a <img> tag:

import * as React from 'react'
import Layout from '../components/layout'
import otterGIF from '../gifs/otter.gif'
const AboutPage = () => (
    return (
        <Layout>
            <div class="yourLayout">
              <img src={otterGIF} alt="Otter dancing with a fish" />
            </div>
        </Layout>
    )
)
export default AboutPage;

The key part is to set the mobile frame as a background of the yourLayout div so it can wrap the GIF inside:

.yourLayout {
   position: relative;
   background: url('../path/to/asset.png') no-repeat center center / 100% 100%;
   width: 500px; //define a constraints if necessary 
   height: 800px;  //define a constraints if necessary 
}

.yourLayout img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain; // work with this property to adjust it if needed
}

Basically, you are setting yourLayout div as a frame while the image inside (the GIF) will take all the available space because of the position absolute.

There's a lack of details in your question so, depending on your structure, you may not need to use the constraints.

user_55853710
Related