Работа с srcset и контейнером-флюидом - PullRequest
Новая
       9

Работа с srcset и контейнером-флюидом

0 голосов
/ 26 августа 2018

Я пытаюсь работать с srcset в комбинации контейнера с жидкостью из Bootstrap.

Я знаю, что-то не так, но я не могу понять, что это! Я пытаюсь использовать calc , потому что у меня нет точного числа для ширины изображения.

В медиа-запросе @media (max-width: 991.98px) все изображения имеют одинаковую ширину. И, кроме того, у меня есть одно большое изображение сверху и два меньших под ним.

Кроме того, я использую lazysizes , чтобы помочь мне рассчитать размер. Мне действительно нужно это использовать?

Я ценю, если кто-нибудь может помочь мне здесь.

https://codepen.io/Sasanmore/pen/zJrEpB

        <figure class="p-2 largefig col-xl-12 col-lg-12">
        <img data-sizes="auto" 
                 alt="test"
                 data-src="https://via.placeholder.com/2880x1920"
                 data-srcset="https://via.placeholder.com/600x400 600w,
                              https://via.placeholder.com/1200x800 1200w,
                              https://via.placeholder.com/1800x1200 1800w,
                              https://via.placeholder.com/2880x1920 2880w"
                 sizes="(min-width: 1200px) 100vw"
                 class="img-fluid lazyload">
        </figure>

        <figure class="p-2 col-lg-6 smallfig col-xl-6">
            <img data-sizes="auto" 
                 alt="test"
                 data-src="https://via.placeholder.com/2880x1920"
                 data-srcset="https://via.placeholder.com/600x400 600w,
                              https://via.placeholder.com/1200x800 1200w,
                              https://via.placeholder.com/1800x1200 1800w,
                              https://via.placeholder.com/2880x1920 2880w"
                 sizes="(min-width: 1200px) calc(0.5 * (50vw - 1em)),
                        (max-width: 991.98px) calc(1 * (100vw - 1em)), 100vw"
                 class="img-fluid lazyload">
        </figure>

1 Ответ

0 голосов
/ 19 сентября 2018

Так что я нашел эту замечательную статью здесь и помог мне! https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

И этот тоже: https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433

...