Question

我正在学习如何向浏览器提供不同大小的不同图像，以根据窗口的宽度选择最合适的图像，但我总是发现浏览器无论何时都会一直下载大尺寸的图像屏幕大小。当窗口大小（例如400px）时，浏览器会下载小尺寸的图像，中等大小以及大尺寸！我将我的示例上传到我在以下URL中拥有的实时服务器，我需要您的帮助才能弄清楚发生了什么。

编辑（这里是一个简单的例子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive images</title>
    <meta name="viewport" content = "width = device-width, initial-scale=1">
    <style>
        #container {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            width: 100%;
            justify-content: center;
            flex-flow: row wrap;
        }

        img {
            width: 50vw;
        }

    /*  @media screen and (min-width: 640px) {
            img {
                width: 50vw;
            }
        }*/

    </style>

</head>
<body>
    <div id="container">

        <img 

        src="images/apple.jpg"
        sizes="50vw" 
        srcset="images/apple-x-small.jpg 360w,
                images/apple-small.jpg 768w,
                images/apple-medium.jpg 992w,
                images/apple-large.jpg 1200w"
        alt="">

尽管使用了srcset和sizes属性，但仍在下载所有图像

0 个答案: