我正在做一个考试项目。
我刚刚才注意到,网页严重依赖的动画 GIF 不会根据容器或窗口宽度调整大小。我正在使用 Bootstrap 3 框架。
如何使用 CSS/HTML 调整动画 GIF 的大小?如果这是不可能的,我可以使用什么来尽可能轻松地实现这一目标?
你可以这样做:
CSS
img.animated-gif{
width: 120px;
height: auto;
}
HTML
<img class="animated-gif" src="https://media.giphy.com/media/Wq6DnHvHchrTG/giphy.gif">
注意:根据需要调整宽度尺寸。 请注意,切勿调整大小超过实际大小,否则会出现像素化。
当我使用自动高度时,它并没有完全解决问题。
当我设置像素高度时,我已经修复了两个 gif 的问题。
示例:
.gify-img1{
width: 35%;
height: 250px;
}
.gify-img2{
width: 35%;
height: 250px;
}
澄清,或回应其他答案。 根据意见作出陈述;用参考资料或个人经验来支持它们