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

234

29 июля 2017, 07:18

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

Answer 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;
    }
}

Answer 2

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

.image { 
  background-image: url("http://lorempixel.com/output/cats-q-c-200-200-5.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("http://lorempixel.com/output/cats-q-c-200-200-1.jpg");     
  } 
}

<img class="image" src="http://lorempixel.com/output/cats-q-c-200-200-5.jpg" />

Answer 3

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    img {
        width: 100%;
        height: auto;
    }
    </style>
</head>
<body>
    <img
        src="200x100.png"
        srcset="300x150.png 1.5x,
                400x200.png 2x,
                600x300.png 3x,
                800x400.png 4x"
        alt="">
        <picture>
            <source media="(min-resolution: 4dppx)" srcset="800x400.png">
            <source media="(min-resolution: 3dppx)" srcset="600x300.png">
            <source media="(min-resolution: 1.5dppx)" srcset="400x200.png">
            <source media="(min-resolution: 1dppx)" srcset="300x150.png">
            <img src="200x100.png" alt="">
        </picture>
        <picture>
            <source media="(min-width: 800px)" srcset="800x400.png">
            <source media="(min-width: 600px)" srcset="600x300.png">
            <source media="(min-width: 400px)" srcset="400x200.png">
            <source media="(min-width: 300px)" srcset="300x150.png">
            <img src="200x100.png" alt="">
        </picture>
</body>
</html>