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

Question

我正在做一份考试项目。

我刚刚注意到网页中重要的动画GIF图并没有根据容器或窗口宽度进行调整大小。我正在使用Bootstrap 3框架。

如何使用CSS/HTML调整动画GIF的大小？如果无法实现，有什么可以尽可能轻松地实现此目的的方法吗？

- Nenn

---

你试过使用 width: 1500px; height: 1500px; 吗？ - Justinas

Answer 1

你可以这样做：

CSS

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

HTML

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

注意：根据您的需求调整宽度大小。但是请注意，不要将其调整超过实际尺寸，否则图像会变得模糊。

此处演示

- Luís P. A.

---

请注意，您应该仅设置 width - 并将 height 设置为 auto。同时设置两者可能会导致 GIF 调整大小并失去比例。 - sheba

Answer 2

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

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

例如：

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

- Hope Games