Отзывчивый вопрос интеграции GIF - PullRequest
Новая
       5

Отзывчивый вопрос интеграции GIF

0 голосов
/ 19 января 2019

Я немного новичок в css, и я пытаюсь интегрировать анимированный GIF-файл в качестве экрана смартфона с помощью начальной загрузки, так как мне нужно, чтобы он был отзывчивым.Я мог бы заставить его работать на больших и средних экранах, но когда дело доходит до маленьких дисплеев, когда размер моего контейнера изменяется, он ломается.

Я сделал кодовую ручку (https://codepen.io/anon/pen/yGddKK), чтобы продемонстрировать свою попытку, но как этотолько на небольших экранах. Я также сделал снимок экрана вне кодепа (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>

Заранее спасибо всем, кто знает, что происходити это может помочь!

1 Ответ

0 голосов
/ 19 января 2019

Вам необходимо перезаписать ширину контейнера.
Используйте приведенный ниже код в html или css файле, чтобы заставить его работать правильно. 

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