Search code examples
htmlcsstwitter-bootstrapgif

How to resize animated GIF with HTML/CSS?


I am working on an exam project.

I have only just now noticed that my animated GIF that the webpage relies heavily upon does not resize in accordance with neither container or window width. I am using Bootstrap 3 framework.

How is it possible to resize an animated GIF with CSS/HTML? And if that's not possible, what can I use to achieve this as easily as possible?


Solution

  • You can do this:

    CSS

    img.animated-gif{
      width: 120px;
      height: auto;
    }
    

    HTML

    <img class="animated-gif" src="https://media.giphy.com/media/Wq6DnHvHchrTG/giphy.gif">
    

    Note: Adjust the width size as you want. Beware never resize more than the actual size, it will be pixelated.

    DEMO HERE