如何使 gif 响应式响应？答案

【问题标题】：How do I make a gif responsive?如何使 gif 响应式响应？
【发布时间】：2021-07-03 14:10:51
【问题描述】：

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

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

.box {
  width: 500px !important;
}

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

【问题讨论】：

这能回答你的问题吗？ how do i make the image take the full width of the screen? (html, css)
如果您有任何方法可以避免，请不要使用!important！
使用宽度：100%；高度：自动；为您的图像并将 .box 类的宽度更改为 100%，请参阅 Tanner Dolby 或 StepUp 的答案，它更高效、更干净

标签： html css responsive gif

【解决方案1】：

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

CSS：

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

和 HTML：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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>

【讨论】：