0

我正在学习如何为浏览器提供不同尺寸的不同图像，以根据窗口的宽度选择最合适的，但我总是发现浏览器总是下载大尺寸的图像，无论屏幕尺寸是多少是。当窗口大小，例如 400 像素时，浏览器会下载图片的小尺寸、中尺寸和大尺寸！我将示例上传到我在以下 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="">
4

0 回答 0