响应式 gif 集成问题

Question

我在 css 方面有点菜鸟，我正在尝试在 bootstrap 的帮助下将动画 gif 集成为智能手机屏幕，因为我需要它来响应。 我可以让它适用于大屏幕和中屏幕，但是当我的容器调整大小时，它会损坏小屏幕。

我制作了一个 codepen (https://codepen.io/anon/pen/yGddKK) 来展示我的尝试，但由于它只在小屏幕上中断，我还在 codepen (https://imgur.com/kf39DzH) 之外制作了它的屏幕截图。

这是有趣部分的代码：

<div class="container position-relative">
    <img class="gif position-absolute img-fluid d-block mx-auto my-auto" src="mygif.gif" alt="">
    <img class="img-fluid d-block mx-auto my-auto" src="phone.png" alt="">
</div>

提前感谢任何知道发生了什么并且可以提供帮助的人！

Answer 1

您需要覆盖您的容器宽度。
在 html 或 css 文件中使用以下代码使其正常工作。

<style>
        @media (min-width: 576px) {
            .container {
                max-width: 100% !important;
            }
        }
</style>