时间戳

首页 > 解决方案 > 如何让 gif 响应式响应？

html - 如何让 gif 响应式响应？

问题描述

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

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

.box {
  width: 500px !important;
}
<div class="box">
  <img src="examplegif" alt="Example gif" style="width:340px;height:170px;">
</div>

标签： htmlcssresponsivegif

解决方案

在这种 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>

推荐阅读