How to resize animated GIF with HTML/CSS?

Question

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?

Answer 1

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