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

Question

我正在做一个考试项目。

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

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

Answer 1

你可以这样做：

CSS

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

HTML

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

注意：根据需要调整宽度尺寸。 请注意，切勿调整大小超过实际大小，否则会出现像素化。

此处演示

Answer 2

当我使用自动高度时，它并没有完全解决问题。

当我设置像素高度时，我已经修复了两个 gif 的问题。

示例：

.gify-img1{
    width: 35%;
    height: 250px;
}
.gify-img2{
    width: 35%;
    height: 250px;
}

Answer 3

澄清，或回应其他答案。 根据意见作出陈述；用参考资料或个人经验来支持它们