Ширина отображаемого изображения не точно 100vw, когда пользовательский агент выбирает изображение шириной 3200px - PullRequest
Новая
       25

Ширина отображаемого изображения не точно 100vw, когда пользовательский агент выбирает изображение шириной 3200px

0 голосов
/ 12 сентября 2018

user-agent выбирает одно из изображений ниже на основе device pixel ratio и viewport size.Но я заметил, что только когда пользовательский агент выбирает ./emmaHQbanner.jpg, ширина отображаемого изображения не совсем 100vw, а чуть больше.Я не могу понять, почему?

html 

<body>
<div>
    <img sizes="100vw"  src="./emma310.jpeg" srcset="./emma720banner.jpeg 720w, ./emma1920banner.jpeg 1920w, ./emmaHQbanner.jpg 3200w" alt="picture of emma watson">
<div>

css 

*{
    padding: 0;
    border: 0;
    margin: 0;
}

html {
    width: 100vw;
}

div {
    width: 100vw;
    margin: 0;
    background-color: red;
    font-size: 0;
}

подробнее 

user agent - firefox on ubuntu
emmaHQbanner.jpg - Resolution (width=3200px , height=642px)

тематическое исследование 

viewport (width 300)  (zoom - 100%)  chosen image - 720px   (display width-300)
viewport (width 640)  (zoom - 300%)  chosen image - 1920px  (display width-640)
viewport (width 800)  (zoom - 240%)  chosen image - 3200px  (display width-900*)
viewport (width 1920) (zoom - 100%)  chosen image - 1920px  (display width-1920)
viewport (width 6400) (zoom - 30%)   chosen image - 3200px  (display width-7200*)

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

Вы пытались использовать условия среды внутри sizes?Для каждого условия носителя укажите 100vw.

Я использовал меньшие размеры для целей тестирования. 

*{
    padding: 0;
    border: 0;
    margin: 0;
}

html {
    width: 100vw;
}

div {
    width: 100vw;
    margin: 0;
    background-color: red;
    font-size: 0;
}
<div>
    <img 
      sizes="(max-width: 720px) 100vw,
            (max-width: 1920px) 100vw,
            (min-width: 1921px) 100vw"
      src="https://via.placeholder.com/350x150" 
      srcset="https://via.placeholder.com/720x150 720w, 
              https://via.placeholder.com/1280x150 1280w, 
              https://via.placeholder.com/1920x150 1920w" 
      alt="picture of emma watson">
<div>
0 голосов
/ 21 сентября 2018

Я обнаружил, что отображаемая дополнительная ширина отображается потому, что я указал неверную ширину пикселя 3200w вместо 3607w для изображения ./emmaHQbanner.jpg. (точная ширина других изображений)

Я узнал, что ширина, указанная в атрибуте srcset для изображений, должна быть точной. пользовательские агенты предполагают, что это правильно, и рассчитывают ширину рендеринга на основе значений, указанных автором.

0 голосов
/ 15 сентября 2018

используйте максимальную ширину в CSS для предотвращения прокрутки 

img{ max-width: 100% /* or 100vw */; }

или вы можете использовать 

body{ width: 100vw;overflow-x: hidden; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...