如何使用 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
How to resize animated GIF with HTML/CSS?
提问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.
注意:根据需要调整宽度大小。当心永远不要调整超过实际大小,它会被像素化。