Скрыть изображение с помощью тега <picture>
Есть тег <picture> и в нем <source> с помощью которого можно подключать разные изображения для разных разрешений.
Мне необходимо показывать определенные изображения только для больших разрешений, и чтобы они не грузились для маленьких.
Я пробовал не указывать файл
<picture>
<source srcset="" media="(max-width: 600px)">
<img src="test.png">
</picture>Но это не работает, картинка все равно подключается при маленьком разрешении.
Если только для больших, то указывать надо не max-width, а min-width. Ну и в дефолтной картинке srcset не указывать - тогда для маленьких экранов ничего отображаться не будет:
<picture>
<source srcset="https://avatars.mds.yandex.net/get-pdb/33827/1f98fb5e-e06f-4ddc-afe7-c4a745ecea0e/s1200" media="(min-width: 600px)">
<img srcset="" alt="">
</picture>Наверное можно решить Вашу задачу на jQuery:
if ($(window).width() > 720) {
$('#img').attr('src', 'images/big-file.png');
} else if ($(window).width() > 480) {
$('#img').attr('src', 'images/middle-file.png');
} else {
$('#img').attr('src', 'images/small-file.png');
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img" src="">
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
- Почему SERVER_ADDR имеет не тот IP 50306 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31941 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26283 visits
- Как через css изменить цвет png изображения? 11765 visits
- Blob video url download 11312 visits
- Php curl запрос через прокси с авторизацией 10721 visits
- Работа с captcha vk api 9517 visits
© "hostciti.net" 19.3.2026 | 18:00