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

问题描述 投票:0回答:3

我正在做一个考试项目。

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

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

html css twitter-bootstrap gif
3个回答
22
投票

你可以这样做:

CSS

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

HTML

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

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

此处演示


0
投票

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

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

示例:

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

0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.