Question

我正在尝试使用srcset属性实现响应式全宽（固定高度）图片横幅。为了支持旧浏览器，我使用picturefill作为polyfill。

基本上我想要一个总是150px的高度全宽横幅，但是根据screen width和device pixel ratio的不同大小的图像。

问题是如果srcset为2，则banner960x300不会选择device pixel ratio图片。

以下是我的尝试：

<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属性的正确语法。

Answer 1

这不是正确的语法。它似乎是基于旧的，现已不存在的srcset规范，它从未在任何地方实现过。

关于您尝试实现的目标，您可以使用art-direction和<picture>元素执行此操作，但除非您可以指定每个可能的视口宽度及其相应的图像（并且您可以＆＃39 ; t），会有视口尺寸，你的图像高度不会是固定的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>

Answer 2

我想这是解决方案：

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

如果device pixel ratio高于1x，则保留相对150px的高度并下载高分辨率图像。

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

2 个答案: