почему браузер выбирает x2 изображения, когда экран 1DPR - это экраны? - PullRequest
Новая
       86

почему браузер выбирает x2 изображения, когда экран 1DPR - это экраны?

0 голосов
/ 04 октября 2019

эта проблема заняла у меня много времени, но я не мог найти решение после долгого поиска в браузере, который постоянно выбирал неправильный img из картинки srcset 

    <picture>
                    <source type="image/webp" media="(max-width:768px)" srcset="
                                                                    img/food1(576w).webp 576w,
                                                                    img/food1(645w).webp 645w,
                                                                    img/food1(1344w).webp 1344w" sizes="90vw">

                    <source type="image/webp" media="(max-width:1024px)" srcset="
                                                                    img/food1(860w).webp 860w,
                                                                    img/food1(1612w).webp 1612w," sizes="84vw">

                    <source type="image/webp" media="(min-width:1025px)" srcset="
                                                                    img/food1(860w).webp 860w,
                                                                    img/food1(1209w).webp 1209w," sizes="63vw">

                    <source type="image/jpg" media="(max-width:768px)" srcset="
                                                                    img/food1(576w).jpg 576w,
                                                                    img/food1(645w).jpg 645w,
                                                                    img/food1(1344w).jpg 1344w" sizes="90vw">

                    <source type="image/jpg" media="(max-width:1024px)" srcset="
                                                                    img/food1(860w).jpg 860w,
                                                                    img/food1(1612w).jpg 1612w," sizes="84vw">

                    <source type="image/jpg" media="(min-width:1025px)" srcset="
                                                                    img/food1(860w).jpg 860w,
                                                                    img/food1(1209w).jpg 1209w," sizes="63vw">

                    <img src="img/food1(860w).jpg" class="img-border" alt="">
                </picture>

моя цель сделать 576wдля экранов телефона 2dpr 645 Вт для планшета 1dpr 1344 Вт для планшета 2dpr

860 Вт для планшетного ПК 1dpr и небольших ноутбукови большие экраны 1209w для ноутбуков 2dpr и большие экраны

Я могу понять, что браузерам немного сложно выбрать 840w для ноутбуков с экранами 1DPR, потому что изображение x2 меньше, чем область просмотра экрана, но это делаетчто при выборе других носителей,
я имею в виду, что браузер выбирает 1344 Вт для 768 пикселей с 1DPR, когда он должен принять 645 Вт
, а также 1612 Вт для 1024 пикселей с 1 DPR, когда он должен взять 860 Вт

, который я знаю овыдача наличных chrome, я отключил его, также попробовал Firefox, но результат тот же

я попробовал x1,x2 метод, такой как 

<source type="image/webp" media="(max-width:768px)" srcset="
                                                                    img/food1(576w).webp x1,
                                                                    img/food1(645w).webp x1,
                                                                    img/food1(1344w).webp x2" sizes="90vw">

Я получил некоторые ошибки

Удален кандидат srcset "img / food1 (1344w) .webp"

...