Как в header на bootstrap прописать отдельное изображение для компьютера и отдельное для телефон?

Question

[SHAKIRA]

Вот на этом примере На телефона нужно другое фото отображать

Answer 1

[WapSter]

Вот так это делается

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

Кстати довольно легко гуглиться. И смотрите видео адекватных разработчиков, типо Вадима Макеева. Хоть чему-то научитесть Женя Залецкий Александр Осадчий ))

Answer 2

[Евгений Залецкий]

Через @media, если я правильно понял суть твоего вопроса.

Answer 3

[Александр Осадчий]

<div class="carousel-item active" role="listbox">
	<img src="img/slider/header.jpg" class="desktop">
	<img src="img/slider/header2.jpg" class="mobile">
</div>

<style>
	img.desktop {
		display: block;
	}

	img.mobile {
		display: none;
	}

	@media (max-width: 768px) {
		img.desktop {
			display: none;
		}

		img.mobile {
			display: block;
		}
	}
</style>

Вам выше правильно ответили..вот исходя из вашего примера..

Comments

[WapSter]

Очень плохая практика.