Размеры изображения - PullRequest
Новая
       35

Размеры изображения

0 голосов
/ 02 марта 2019

У меня есть это: 

  <img class="poster" srcset="https://image.tmdb.org/t/p/original/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg 1024w,
                                        https://image.tmdb.org/t/p/w780/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg 700w,
                                        https://image.tmdb.org/t/p/w500/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg 400w"
                                sizes="100vw" 
            />

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

1 Ответ

0 голосов
/ 03 марта 2019

Если вам нужно отобразить одно и то же изображение для всех размеров окна просмотра, то я рекомендую вам сделать так, чтобы изображение велось как flex-box, чтобы сделать его отзывчивым.При этом вам не нужно беспокоиться о @media (min-width) точках останова.и изображение всегда будет заполнять всю ширину области просмотра (100vw).

Вот такой код : 

body {
  margin: 0;
  padding: 0;
}

.poster {
  max-width: 100%;
  display: block;
  height: auto;
}
<img class="poster" src="https://image.tmdb.org/t/p/original/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg" />

Рекомендуется использовать <img srcset="" sizes=""/>, если вам нужно изменить изображение для пользователей на разных дисплеях.
Если вы хотите, чтобы пользователи с мобильного телефонаПросмотр изображений 1,
Пользователи с планшетом для просмотра изображений 2 и
Пользователи с рабочими столами для просмотра изображений 3,
, тогда вы можете сделать это легко с помощью <img srcset="" sizes=""/>.

Вот пример кода для достижения этого, 

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #222;
  margin: 0;
  padding: 0;
  height: 100vh;
}
<img src="https://picsum.photos/1024/512?image=0"
     srcset="https://picsum.photos/1024/512?image=2 1024w,
             https://picsum.photos/780/390?image=4 780w,
             https://picsum.photos/500/250?image=6 500w"
     sizes="(min-width: 1024px) 1024px, /* For Desktop users */
            (min-width: 780px) 780px, /* For Tablet users */
            500px">  /* Default for Mobile users */
Измените ширину области просмотра, и вы увидите изменение изображения при увеличении ширины.

Надеюсь, это поможет.

Peace ?

...