Как изменить картинку на сайте при определенном разрешении?

#javascript #html #css #адаптивная_верстка

Необходимо, чтобы при мобильном разрешении была одна картинка, а при десктопном разрешении
- другая. Как это можно осуществить?
    

Ответы

Ответ 1

Медиа-запрос
Допустим, по дефолту имеем background-image:url("images/main.png");
И определяем медиа-запрос для девайсов с разрешением от 320 до 500 пикселей:

@media (min-width:320px) and (max-width:500px) {
    .your-block {
         background-image:url("images/mobile.png");
    }
}


Если нужно, чтобы менялась именно содержательная картинка(вставленная с помощью тега
img в ваш html - алгоритм тот же, только у вас должно быть две картинки, допустим одна
имеет класс mobile-img, вторая соответственно  main-img. И получаете что-то вроде вот
такого css

.mobile-img {
    display:none;
}

 @media (min-width:320px) and (max-width:500px) {
    .mobile-img {
         display:block;
    }
    .main-img {
        display: none;
    }
}


Ответ 2

Смотрите в сторону атрибутов srcset, sizes у элемента img или используйте возможности
элемента picture. Элемент picture имеет более «продвинутые» возможности.

Можно не только изменять (увеличивать или уменьшать) фактический размер картинки
при различных плотностях или разрешения экрана устройства, но, например, отобразить
вместо альбомной картинки — картинку портретной ориентации, что порой бывает полезно
при создании адаптивного/отзывчивого сайта или приложения.

Поддержка браузерами srcset и picture.

Но там где возможно, например для логотипа, лучше использовать векторный формат изображений
— SVG. Формат широко поддерживается браузерами.




    
    
    
    
    


    

        
            
            
            
            
            
        

        
            
            
            
            
            
        




Ответ 3

Если вдруг картинки img и менять разметку никак нельзя, то можно вопрользоваться
таким хаком (будет работать только для фиксированных размеров):



.image {
  background-image: url("https://i.stack.imgur.com/7KXRp.jpg");
  /* Устанавливаем ширину и высоту в 0 */
  width: 0;
  height: 0;
  /* Устанавливаем размеры за счёт padding-left и padding-top */
  padding-left: 300px;
  padding-top: 200px;
  /* Устанавливаем по своему вкусу, здесь изображение будет растигиваться под размеры
блока */
  background-size: 100% 100%;
}

/* медиа запросы с другим фоном */
@media (min-width: 800px) {
  .image {
      background-image: url("https://i.stack.imgur.com/9OcHP.jpg");    
  }
}