响应全宽图像横幅与固定的高度使用srcset

问题描述

我试图用 srcset 属性实现响应的全宽（固定高度）图像横幅。
为了支持旧版浏览器，我使用作为polyfill。

I am trying to implement a responsive full width (fixed height) image banner with the srcsetattribute.To support older browsers i am using picturefill as a polyfill.

基本上我想要一个总是150px高的全幅横幅，但根据屏幕宽度和设备像素比率。

Basically i want a always 150px heigh full width banner, but with a different sized image depending von the screen widthand the device pixel ratio.

问题是 srcset 不选择 banner960x300 image如果设备像素比率为2。

The Problem is that srcset does not pick for example the banner960x300image if the device pixel ratio is 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 属性。

I am not sure if this is the correct syntax for the srcsetattribute.

推荐答案

我想这是解决方案：

<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>

如果设备像素比率高于 1x 。

这篇关于响应全宽图像横幅与固定的高度使用srcset的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！