Ответ 1

В будущем добавьте код, который вы пробовали.

если это тег image, вы можете использовать класс. Скрыть второе изображение при загрузке страницы и показать + скрыть изображение 1 при определенном размере экрана, например:

HTML

<img src="image.jpg" class="image1"/>
<img src="image.jpg" class="image2"/>

CSS

.image2{
   display: none;
}

@media only screen and (max-width: 500px){ //some value
   .image1{
     display: none;
   }

   .image2{
     display: block;
   }
}

ПРИМЕР 1 - ПРОСМОТР SHRINK

ИЛИ

Если это a background-image, вы можете просто поменять изображение:

HTML

<div class="example"></div>

CSS

.example{
   background-image: url("example.jpg");
}

@media only screen and (max-width: 500px){ //some value

   .example{
      background-image: url("example2.jpg");
   }
}

ПРИМЕР 2 - ПРОСМОТР КОРОБКИ

Ответ 2

Это можно сделать с помощью элемента picture HTML5, который не требует CSS для изменения элементов img в указанных медиа-запросах. Если вам интересен этот подход, знайте, что его поддержка браузера НЕ включает IE, хотя для старых браузеров есть полифилл.

<h1>Resize Window</h1>
<picture>
  <source srcset="https://placehold.it/1400x1400" media="(min-width: 1400px)"/>
  <source srcset="https://placehold.it/1200x1200" media="(min-width: 1200px)"/>
  <source srcset="https://placehold.it/800x800" media="(min-width: 800px)"/>
  <source srcset="https://placehold.it/600x600" media="(min-width: 600px)"/>
  <img src="https://placehold.it/400x400" alt="example"/>
</picture>

Ответ 3

Вы можете использовать свойство content для вставки изображения. Однако изображения, подобные этому, могут быть сложными для стиля. (Выполнить фрагмент кода во весь экран перед изменением размера браузера)

@media screen and (max-width: 479px) {
    div img {
        display:none;
    }
    div::before {
        content: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66");
    }
}

<p>Resize this window to see image change</p>
<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="200px" />
</div>

Ответ 4

Ответ от jmore009 очень полезен для моего требования, но мне нужно уточнить. На моем сайте размещен баннер, ориентированный на верх страницы, который с шириной 600 пикселей слишком широк для мобильных телефонов. Поэтому мне нужно было иметь изображение размером 600 пикселей и заменить более узкое изображение размером 310 пикселей для видовых экранов мобильных телефонов. После внесения изменений в код jmore009 я перешел к следующему коду, который работает (и проверяет):

HTML 4.01 код:

<div class="centered">
    <img src="images/short_banner.gif" alt="MYSITE.COM" class="image2">
    <img src="images/long_banner.gif" alt="MYSITE.COM" class="image1">
</div>

Код CSS 3.0:

.image2{
   display: none;
}
@media only screen and (max-width: 600px)
   {
   .image1 {
         display: none;
       }
    .image2 {
         display: block;margin:0 auto;
       }
    }

Я не мог получить короткий баннер по центру без использования DIV. HTML выглядит неловко, и должен быть лучший способ выразить HTML-код. Ваши комментарии будут оценены. (Увы, я не смог набрать больше очков, потому что я ниже 15 очков.)