How do I make a gif responsive?

user_14986102 0
Viewed 2836

I want to make a gif image responsive to resize it to cover the width of every mobile device. This is because for some reason I can get a video to autoplay in certain IOS devices, so I though of converting the video into a gif. Now, how can I make it responsive? I don't really care about the height, is more of a width problem.

this is my oode so far:

.box {
  width: 500px !important;
}
<div class="box">
  <img src="examplegif" alt="Example gif" style="width:340px;height:170px;">
</div>

responsive gif css html
3 Answers

you have to set the maximum width to the image or video in this case of the gif.

<style>
    .box {
        display: flex;
        justify-content: center;
    }
    img {
        max-width: 100%;
        height: auto;
    }
</style>
<html>
    <body>
        <div class="box">
            <img src="https://media.giphy.com/media/VRhsYYBw8AE36/giphy.gif" alt="Example gif">
        </div>
    </body>
</html>
user_125381370

You can make your image responsive by applying the following class to your image.

CSS:

.responsive {
    max-width: 100%; 
    width: auto; 
    height: auto;
}

and HTML:

<img src="ypurgif" class="responsiveImage" />
user_16462400

The first step would be to remove width: 500px from the parent container .box. This explicit width restricts the image from being able to fill the entire viewport since it's parent containers width is only 500px. Next, there is an 8px default margin on the <body> from the user agent stylesheet. Using margin: 0 within the body styling will ensure there isn't any extra space around your content.

To make the GIF responsive and fill the entire viewport width, you can add some styling to the nested <img> elements in .box. I gave the images a width and max-width of 100% to ensure they take up all the available space. For the image height, use height: 100% to make sure it's 100% of the containing blocks height or height: auto to let the browser calculate and select a height for the specified element. Try this out.

body {
  margin: 0;
  padding: 0;
}

.box{
 width: auto;
}

.box img {
  max-width: 100%;
  width: 100%;
  height: auto; /* vary this to your needs ie auto, 100%, etc */
  margin: 0 auto;
}
<div class="box">
  <img src="https://media.giphy.com/media/ZqlvCTNHpqrio/giphy.gif" alt="Example gif">
</div>

user_113895810
Related