加载多个设备的响应头图像和多个px密度

Question

我在Sketch中完成的设计有3种不同的布局。每个设计都有一个标题图像，如下所示：

在不同的设备上，我加载了不同的图像以控制高度并裁剪图像。当我从Sketch导出时，我有以下图像：

dog-header-mobile-1x.png
dog-header-mobile-2x.png
dog-header-mobile-3x.png
dog-header-mobile-4x.png

dog-header-tablet-1x.png
dog-header-tablet-2x.png
dog-header-tablet-3x.png
dog-header-tablet-4x.png

dog-header-desktop-1x.png
dog-header-desktop-2x.png
dog-header-desktop-3x.png
dog-header-desktop-4x.png

我想在适当的地方加载1x，2x，3x和4x图像。但令我困惑的是，我为3台设备提供了3个不同的图像，因此我需要使用srcset和sizes来实现这一目标吗？这似乎是一种非常冗长的方式，我很确定我做错了。

Answer 1

您是否尝试过媒体查询？ 您可以在要使用移动设备，平板电脑或桌面版时定义尺寸。在那里，您还可以为标题图像设置不同的背景图像。

https://wiki.selfhtml.org/wiki/CSS/Media_Queries

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

您可以使用<picture>元素。

<picture>
    <source
        media="(max-width: 740px)"
        srcset="
            dog-header-mobile-1x.png,
            dog-header-mobile-2x.png 2x,
            dog-header-mobile-3x.png 3x,
            dog-header-mobile-4x.png 4x">
    <source
        media="(max-width: 1440px)"
        srcset="
            dog-header-tablet-1x.png,
            dog-header-tablet-2x.png 2x,
            dog-header-tablet-3x.png 3x,
            dog-header-tablet-4x.png 4x">
    <source
        srcset="
            dog-header-desktop-1x.png,
            dog-header-desktop-2x.png 2x,
            dog-header-desktop-3x.png 3x,
            dog-header-desktop-4x.png 4x">

    <img src="dog-header-desktop-1x.png" alt="Dog">
</picture>

IE不支持它，但会回退到默认的img元素。