HTMLレスポンシブの画像サイズ

Question

私は本当にこれで苦労しています。私は最初のWebプロジェクトでレスポンシブなイメージを備えたレスポンシブなギャラリー（カラム付き）を実装しています。これは遅延ロード用にフォーマットされています。 760ピクセル後、ギャラリーは2つの列になり、1365ピクセル3列、1920ピクセル以上の4列になります。

<img class="lazyload" 
        src="placeholder.jpg" 
        data-srcset="image-360w.jpg 360w, 
           image-512w.jpg 512w, 
           image-750w.jpg 750w" 
        data-src="image-750w.jpg" 
        sizes="(min-width:761px) 50vw, 
         (min-width:1366px) 33.3vw, 
         (min-width:1921px) 25vw" 
        alt="Description"> 

「サイズ」では、2番目の列が表示されている場所で最小幅を設定しています。しかし、残りの各列のブレークポイントの最小幅は、私のために働いていない、それは毎回最大の負荷（私は網膜ディスプレイを使用していないし、Safari、FirefoxとChromeでテストした）。たぶん私はこれを初めて知ったので、単純なことを完全に見落としているのかもしれない。とにかく、列カウント値を使用して読み込むイメージを計算することができるかどうかを考えていました。 calc（100vw/column-count）のようなものは動作しません。これをどうすれば解決できますか？ min-widthとmax-widthについて何か不足していますか？私はスクリプトに行く必要がありますか？

Answer 1

はHTML

<picture> 
    <!-- Full HD Resolution --> 
    <source srcset="https://placehold.it/1920x1080" media="(min-width: 1920px)" /> 
    <!-- Samsung Galaxy S7 Edge --> 
    <source srcset="https://placehold.it/1442x2562" media="(min-width: 1442px)" /> 
    <!-- HiDPI Laptop --> 
    <source srcset="https://placehold.it/1440x900" media="(min-width: 1440px)" /> 
    <!-- Common Resolution --> 
    <source srcset="https://placehold.it/1366x768" media="(min-width: 1366px)" /> 
    <!-- 4:3 (Old CRT monitors) --> 
    <source srcset="https://placehold.it/1280x1024" media="(min-width: 1280px)" /> 
    <!-- iPad Pro --> 
    <source srcset="https://placehold.it/1024x1366" media="(min-width: 1024px)" /> 
    <!-- iPad --> 
    <source srcset="https://placehold.it/768x1024" media="(min-width: 768px)" /> 
    <!-- iPhone 6 Plus --> 
    <source srcset="https://placehold.it/414x736" media="(min-width: 414px)" /> 
    <!-- Google Nexus 5X --> 
    <source srcset="https://placehold.it/412x732" media="(min-width: 412px)" /> 
    <!-- iPhone 6 --> 
    <source srcset="https://placehold.it/375x667" media="(min-width: 375px)" /> 
    <!-- iPhone 5 --> 
    <source srcset="https://placehold.it/320x568" media="(min-width: 320px)" /> 
    <!-- If the browser doesn't support "srcset" attribute, then load the default resolution --> 
    <img src="https://placehold.it/1366x768" alt="Background"/> 
</picture> 

で<picture>タグを使用してみてください。しかし、それは、このことができますCSS

img { 
    background-image: url('path-to-image'); 
    background-position: 0% 0%; 
    background-size: cover; 
    width: 100%; 
    height: auto; 
    } 

希望を使用して応答性のイメージを作成する方が良いでしょう。