为多个设备和多个像素密度加载响应式 header 图像

Question

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

在不同的设备上，我加载不同的图像以控制高度并裁剪图像。当我从 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 来实现这个吗？这似乎是一种非常 long-winded 的方法，我很确定我做错了。

Answer 1

你试过媒体查询了吗？当您想使用手机、平板电脑或桌面版本时，您可以定义尺寸。您还可以在那里为您的 header-image.

设置不同的 background-image

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 元素。

为多个设备和多个像素密度加载响应式 header 图像

Loading responsive header images for multiple devices and multiple px densities

css

sketch-3