0

ウィンドウの幅に応じて最適なものを選択するために、さまざまなサイズのさまざまな画像をブラウザーに提供する方法を学んでいますが、画面のサイズに関係なく、ブラウザーは常に大きなサイズの画像をダウンロードすることが常にわかりますは。たとえば 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="">
4

0 に答える 0