Блог

Здесь мое требование — отображать одно изображение для мобильных устройств и другое изображение для портативных устройств, я пытаюсь использовать тег изображения, но у меня это не сработало.

Я хочу показывать разные изображения для мобильных устройств и ноутбуков, используя тег изображения html?

Ну, это не совсем то, что вам нужно, потому что он проверяет не тип устройства, а только его размер… Но в мире RWD этого достаточно, я думаю.

Вы можете использовать srcset. Таким образом, вместо того, чтобы предоставлять только одно изображение, вы добавляете их больше, и браузер выполняет всю работу, выбирая, какое из них показывать:

Вот несколько примеров:

 <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
  

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

Вы можете прочитать больше по этому вопросу:

• https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

HTML : <img src="img1.jpg" class="img1">
<img src="img2.jpg" class="img2">

css: `.img1 {отображение: блок;} .img2 {отображение: отсутствует;}

@экран только для мультимедиа и (максимальная ширина: 768 пикселей) { .img1 { дисплей: отсутствует; } .img2 { дисплей: блок; } } `