css - 为多个设备和多个像素密度加载响应式标题图像

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 个设备，所以我需要使用srcsetANDsizes来实现这一点吗？这似乎是一种非常冗长的方法，我很确定我做错了。

Answer 1

您可以使用该<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元素。

Answer 2

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

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

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