Сохраняйте отзывчивое соотношение сторон на анимированном листе спрайта CSS - PullRequest
Новая
       26

Сохраняйте отзывчивое соотношение сторон на анимированном листе спрайта CSS

1 голос
/ 11 марта 2020

Я сделал этот анимированный спрайт-лист отзывчивым, но он не сохраняет свое соотношение сторон при изменении размера окна. Это выглядит растянуто.

Как я могу сохранить одинаковое соотношение сторон при масштабировании div, чтобы анимированный лист спрайтов стал отзывчивым? 

<style>
    .gale-anim{
        width:100%;
        height:100%;
        background:url('gale.png');
        background-size:100% 500%;
        animation:fly 0.7s steps(5) infinite;
    }
    @keyframes fly {
        0%{ background-position: 0px 0px; }
        100%{ background-position: 0px -500%; }
    }
</style>

<div style="max-width:556px; max-height:448px;">
    <div class="gale-anim"></div>
</div>
...