img srcset sizes

1. srcset

以便浏览器可以根据不同的屏幕尺寸和分辨率选择最合适的图片

• image-320w.jpg 320w 表示宽度为 320 像素的图片。
• image-480w.jpg 480w 表示宽度为 480 像素的图片。
• image-800w.jpg 800w 表示宽度为 800 像素的图片。

<img 
src="default-image.jpg"
srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
alt="Example image"
>

示例如下：

    <style>
        .aa {
            max-width: 1000px;
            width: 100%;
            display: block;
            margin: auto;
            padding: 0;
            
        }
    </style>
    <img class="aa"
    src=""
    srcset="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg 320w, 
    https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg 750w, 
    https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg 1500w, 
    https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg 1780w"
    alt="Responsive image">

2. sizes: 描述了在不同视口宽度下，图像应占据的显示宽度。它帮助浏览器决定使用 srcset 中哪个图像。

• (max-width: 600px) 100vw: 当视口宽度最大为 600px 时，图像宽度为视口的 100%。
• (max-width: 1024px) 50vw: 当视口宽度最大为 1024px 时，图像宽度为视口的 50%。
• 33vw: 当视口宽度大于 1024px 时，图像宽度为视口的 33%。

    <img class="aa"
    src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
    srcset="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg 320w, 
    https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg 750w, 
    https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg 1500w, 
    https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg 1780w"
    sizes="(max-width: 600px) 100vw, 
        (max-width: 1200px) 50vw, 
        25vw"
    alt="Responsive image">

• srcset 列出了不同分辨率的图像，并提供了每个图像的宽度。
• sizes 提供了在不同视口宽度下图像应占用的宽度。浏览器会根据这些信息选择最适合的图像资源。