如何使 gif 响应？

Question

我想制作一个 gif 图像响应调整它的大小以覆盖每个移动设备的宽度。这是因为出于某种原因，我可以让视频在某些 IOS 设备上自动播放，所以我考虑将视频转换为 gif。现在，我怎样才能让它响应？我不太关心高度，更多的是宽度问题。

这是我到目前为止的作品：

.box {
  width: 500px !important;
}

<div class="box">
  <img src="examplegif" alt="Example gif" style="width:340px;height:170px;">
</div>

Answer 1

您可以通过将以下 class 应用于您的图像来使您的图像具有响应性。

CSS:

.responsive {
    max-width: 100%; 
    width: auto; 
    height: auto;
}

和HTML：

<img src="ypurgif" class="responsiveImage" />

Answer 2

在 gif 的这种情况下，您必须为图像或视频设置最大宽度。

<style>
    .box {
        display: flex;
        justify-content: center;
    }
    img {
        max-width: 100%;
        height: auto;
    }
</style>
<html>
    <body>
        <div class="box">
            <img src="https://media.giphy.com/media/VRhsYYBw8AE36/giphy.gif" alt="Example gif">
        </div>
    </body>
</html>

Answer 3

第一步是从父容器 .box 中删除 width: 500px。这个明确的宽度限制了图像能够填满整个视口，因为它的父容器宽度只有 500 像素。接下来，在用户代理样式表的 <body> 上有一个 8px 默认值 margin。在正文样式中使用 margin: 0 将确保您的内容周围没有任何额外的 space。

要使 GIF 响应并填充整个视口宽度，您可以向 .box 中的嵌套 <img> 元素添加一些样式。我给图像设置了 100% 的 width 和 max-width，以确保它们占用所有可用的 space。对于图像高度，使用 height: 100% 确保它是包含块高度的 100%，或者使用 height: auto 让浏览器计算并使用 select 指定元素的高度。试试这个。

body {
  margin: 0;
  padding: 0;
}

.box{
 width: auto;
}

.box img {
  max-width: 100%;
  width: 100%;
  height: auto; /* vary this to your needs ie auto, 100%, etc */
  margin: 0 auto;
}

<div class="box">
  <img src="https://media.giphy.com/media/ZqlvCTNHpqrio/giphy.gif" alt="Example gif">
</div>

如何使 gif 响应？

How do I make a gif responsive?

html

css

gif

responsive