Как сделать замену изображение при адаптации?

Question

Здраствуйте! Делаю сайт и нужно чтобы изображение заменялось на другое изображение. Возможно ли это?

Answer 1

ну если ты через css задаешь background то почему бы просто не поменять его с помощью медиа запроса, это самый простой вариант

Answer 2

Если через css, как Андрей советует, вот отличный способ - внутри html документа, что-то типа:

<div class="PeKa" style="background:url(./img/bg-boom.jpg) center no-repeat;"></div>
<div class="Ne-PeKa" style="background:url(./img/bg-mini_boom.jpg) center no-repeat;"></div>

Далее в стилях медиа-запросами менять видимость блока, вот и всё.

.PeKa{display:none;}

@media (max-width: 960px){
  .PeKa{display:block;}
  .Ne-PeKa{display:none;}
}

Не забывай о приоритете очереди в css - сверху вниз от менее важных к более.

П.С.

Почему внутри HTML, а не всё в css... думаю, тут очевидно - таким образом ты сможешь уже с помощью JS или php менять картинки автоматом... хотя, тут так же можно использовать теги img и точно так же их показывать/скрывать. Разница в них очевидна: 1 - фон, 2 - блок/элемент. Ну и фон требует какого-то размера определённого... в общем, вариантов на самом деле много. Ищи такие решения на JS

Answer 3

Вот так, используйте media-запросы, например, если у вас background

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

.super__block {
  height: 100%;
  width: 100%;
  background: url(https://picsum.photos/2000/1000) no-repeat center;
  background-size: cover;
}

@media (max-width: 1000px) {
  .super__block {
    background-image: url(https://picsum.photos/1000/500);
  }
}

<div class="super__block">
</div>

Если вам нужно, чтобы под разные устройства подгружались разные img, вам нужно использовать тег picture: читать

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

<h3>Когда экран будет переходить отметку в 1000px, будет меняться изображение</h3>
<picture>
    <source srcset="https://picsum.photos/1000/500" media="(max-width: 1000px)"> <!-- Когда экран будет меньше 1000px, будет подгружено это изображение -->
    <source srcset="https://picsum.photos/2000/1000">
    <img srcset="https://picsum.photos/2000/1000" alt="My default image">
</picture>

БЛОГ НА HUSL

Как сделать замену изображение при адаптации?

Ответы (3 шт):