Адаптивен банер с изображение с пълна ширина и фиксирана височина с помощта на srcset

Опитвам се да внедря отзивчив банер с изображение с пълна ширина (фиксирана височина) с srcsetattribute. За да поддържам по-стари браузъри, използвам picturefill като polyfill.

По принцип искам винаги банер с пълна ширина с височина 150px, но с различен размер на изображението в зависимост от 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;">

Не съм сигурен дали това е правилният синтаксис за srcsetattribute.


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

Отговори (2)


arrow_upward
1
arrow_downward

Това не е правилният синтаксис за това. Изглежда, че се основава на старата, вече несъществуваща спецификация на srcset, която никога не е била прилагана никъде.

По отношение на това, което се опитвате да постигнете, бихте могли да направите това с art-direction и елемента <picture>, но освен ако не можете да посочите всяка възможна ширина на прозореца за изглед и съответното им изображение (а не можете), ще има размери на прозореца за изглед, където вашите височината на изображението няма да бъде фиксирана 150px, така че очаквайте известно изкривяване там. Може би е по-добре да разхлабите изискването за височина от 150px между точките на прекъсване (или да използвате 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