Incorrectfree
@Incorrectfree
Графический Дизайнер

Возможно ли осуществить разную загрузку изображений в зависимости от разрешения монитора?

Возможно ли осуществить загрузку разных изображений в зависимости от монитора?
При этом не загружая 1920x1080 и 1280x720 вместе.
  • Вопрос задан
  • 2069 просмотров
Решения вопроса 2
1. Элемент picture. Поддержка: caniuse.com/#feat=picture
<picture>
  <source srcset="small-image.png" media="(max-width: 720px)">
  <img src="default-image.png" alt="">
</picture>

2. Элемент div с фоновым изображением, и медиа-запросы в css с изменением фонового изображения и размера div'а в зависимости от размера окна
.image {
  display: inline-block;
  width: 1200px;
  height: 700px;
  background: url('default-image.png');
}

@media (max-width: 720px) {
  .image {
    width: 600px;
    height: 400px;
    background: url('small-image.png');
  }
}

3. Элемент img с изменением атрибута src через javascript.
const imageDefault = 'default-image.png'
const smallImage = 'small-image.png'
const imageElement = document.getElementById('image')

function handleWindowResize() {
  const width = window.innerWidth

  if (width <= 720) {
      imageElement.src = smallImage
   } else {
      imageElement.src = imageDefault
   }
}

handleWindowResize()
window.addEventListener('resize', handleWindowResize)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Dark_Scorpion
@Dark_Scorpion
Проверяете переменные window.screen.width и window.screen.height и в зависимости от их значений подставляете нужный url на изображение. Или подгружаете ajax запросом.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы