Отзывчивый баннер с изображением полной ширины с фиксированной высотой с использованием srcset

Я пытаюсь реализовать отзывчивый баннер с изображением полной ширины (фиксированной высоты) с атрибутом srcset. Для поддержки старых браузеров я использую picturefill в качестве полифилла.

По сути, я хочу, чтобы баннер всегда имел высоту 150 пикселей и полную ширину, но с изображением другого размера в зависимости от screen width и device pixel ratio.

Проблема в том, что srcset не выбирает, например, изображение banner960x300, если device pixel ratio равно 2.

Вот что я пробовал:

<img srcset="/images/banner480x150.png 480w 1x,
             /images/banner960x300.png 480w 2x,
             /images/banner768x150.png 768w 1x,
             /images/banner1536x300.png 768w 2x,
             /images/banner992x150.png 992w 1x,
             /images/banner1984x300.png 992w 2x,
             /images/banner1200x150.png 1200w 1x,
             /images/banner2400x300.png 1200w 2x,
             /images/banner1920x150.png 1920w 1x,
             /images/banner3840x300.png 1920w 2x"
     sizes="100%"
     class="banner"
     style="width: 100%; height: 150px;">

и

<img srcset="/images/banner480x150.png 480w 150h,
             /images/banner960x300.png 960w 300h,
             /images/banner768x150.png 768w 150h,
             /images/banner1536x300.png 1536w 300h,
             /images/banner992x150.png 992w 150h,
             /images/banner1984x300.png 1984w 300h,
             /images/banner1200x150.png 1200w 150h,
             /images/banner2400x300.png 2400w 300h,
             /images/banner1920x150.png 1920w 150h,
             /images/banner3840x300.png 3840w 300h"
     sizes="100%"
     class="banner"
     style="width: 100%; height: 150px;">

Я не уверен, что это правильный синтаксис для атрибута srcset.


image html css src
person Thomas    schedule 01.10.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это неправильный синтаксис для этого. Похоже, он основан на старой, ныне несуществующей спецификации srcset, которая нигде не применялась.

Что касается того, чего вы пытаетесь достичь, вы можете сделать это с помощью художественного направления и элемента <picture>, но если вы не можете указать каждую возможную ширину области просмотра и соответствующее изображение (а вы не можете этого сделать), будут размеры области просмотра, где ваш высота изображения не будет фиксированной 150 пикселей, поэтому ожидайте некоторого искажения. Возможно, было бы лучше ослабить требование высоты 150 пикселей между контрольными точками (или использовать клип CSS, чтобы сохранить его).

Синтаксис для этого будет примерно таким, как показано ниже. Нет необходимости указывать sizes, поскольку по умолчанию используется значение 100vw (то есть 100% ширины области просмотра, что вам и нужно).

<picture>
    <source media="(max-width: 480px)" srcset="/images/banner480x150.png 480w, /images/banner960x300.png 960w">
    <source media="(max-width: 768px)" srcset="/images/banner768x150.png 768w,
             /images/banner1536x300.png 1536w">
    <source media="(max-width: 992px)" srcset="/images/banner992x150.png 992w,
             /images/banner1984x300.png 1984w">
    <source media="(max-width: 1200px)" srcset="/images/banner1200x150.png 1200w,
             /images/banner2400x300.png 2400w">
    <img src="/images/banner1920x150.png" 
         srcset="/images/banner1920x150.png 1920w,
             /images/banner3840x300.png 3840w"
         class="banner"
         alt="This is an awesome banner!">
</picture>
person Yoav Weiss    schedule 01.10.2014
comment
Я думаю, что нашел решение. Я разместил это как ответ, может быть, вы можете это проверить. В любом случае, спасибо, что указали мне правильное направление! - person Thomas; 01.10.2014

arrow_upward
0
arrow_downward

Я думаю, это решение:

<picture>
    <source media="(min-width: 1200px)" srcset="/images/banner1920x150.jpg 1x,
                                                /images/banner3840x300.jpg 2x">
    <source media="(min-width: 992px)" srcset="/images/banner1200x150.jpg 1x,
                                               /images/banner2400x300.jpg 2x">
    <source media="(min-width: 768px)" srcset="/images/banner992x150.jpg 1x,
                                               /images/banner1984x300.jpg 2x">
    <source media="(min-width: 480px)" srcset="/images/banner768x150.jpg 1x,
                                               /images/banner1536x300.jpg 2x">
    <img src="/images/banner480x150.jpg"
         srcset="/images/banner480x150.jpg 1x,
                 /images/banner960x300.jpg 2x"
         alt="Awesome banner"
         class="banner"
         style="width: 100%; height: 150px;>
</picture>

Относительная высота 150 пикселей сохраняется, и изображение с высоким разрешением загружается, если device pixel ratio выше, чем 1x.

person Thomas    schedule 01.10.2014
comment
Да, этот синтаксис должен быть более или менее идентичен тому, который я предложил. - person Yoav Weiss; 06.10.2014