10

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

3

3 ответа 3

12

Медиа-запрос
Допустим, по дефолту имеем 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
  • Я бы использовал js, чтобы не грузить большие картинки на мобильные 28 июл 2017 в 16:15
  • Можно и так, но это ведь уже вопрос опитимизации) 28 июл 2017 в 16:21
5

Смотрите в сторону атрибутов 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>
3
  • Тут ведь не адаптивность картинки, а отображение другой. 28 июл 2017 в 18:27
  • А можете добавить запускемый пример? 29 июл 2017 в 5:57
  • В ближайшее время добавлю. Только начал отвечать на Stack Overflow, не совсем механика по началу понятна. Но сейчас в справке посмотрел (раздел «Подсветка синтаксиса в коде») — вроде ничего сложного нет. 29 июл 2017 в 9:24
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");    
  }
}
<img class="image" src="https://i.stack.imgur.com/7KXRp.jpg" />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.