如何使 gif 响应式响应？
Posted
技术标签:
【中文标题】如何使 gif 响应式响应？【英文标题】：How do I make a gif responsive? 【发布时间】：2021-07-03 14:10:51 【问题描述】：我想制作一个响应式 gif 图像以调整其大小以覆盖每个移动设备的宽度。这是因为出于某种原因，我可以在某些 ios 设备上自动播放视频，所以我想将视频转换为 gif。现在，我怎样才能让它响应？我真的不在乎高度，更多的是宽度问题。
到目前为止，这是我的作品：
.box
width: 500px !important;
<div class="box">
<img src="examplegif" 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 的答案，它更高效、更干净
【参考方案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" >
</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" >
</div>【讨论】：
以上是关于如何使 gif 响应式响应？的主要内容，如果未能解决你的问题，请参考以下文章