如何使用 HTML/CSS 调整动画 GIF 的大小?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34331351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 18:40:11  来源:igfitidea点击:

How to resize animated GIF with HTML/CSS?

htmlcsstwitter-bootstrapgif

提问by Nenn

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.

我刚刚才注意到,我的网页严重依赖的动画 GIF 没有根据容器或窗口宽度调整大小。我正在使用 Bootstrap 3 框架。

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?

如何使用 CSS/HTML 调整动画 GIF 的大小?如果这是不可能的,我可以使用什么来尽可能轻松地实现这一目标?

回答by Luís P. A.

You can do this:

你可以这样做:

CSS

CSS

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

HTML

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

演示在这里