Форум Сайтостроение Веб-строительство

Респонсив картинки

S
На сайте с 23.05.2004
Offline
315
Stek
579

Есть задача - сделать картинки респонсивом на сайте, т.е. что бы на мобильном не вылезали за пределы.

Но есть "но" - по старой памяти все картинки прописаны с width="XXX" height="XXX" атрибутами. И поэтому все трюки с css не работают.

Т.е. к примеру img {max-width:100%} будет прекрасно пропорционально уменьшать картинку, если в ней нет выше указанных атрибутов. А если есть, то картинка сжимается не пропорционально, а только по ширине.

Можно конечно убирать фиксированный размер - но блин он всегда был рекомендован для указания. Полазил по мобильным сайтам - там размер фактически ни у кого для картинки не задан. Но на 4pda.ru он задан для картинок на первой странице. И там же они скейлятся корректно, но не понимаю как.

Не думал, что будет такая засада правильно картинку в html отобразить :)

Это просто подпись.
S
На сайте с 13.10.2014
Offline
171
silicoid
#1

style="width:100%; height:auto;"

перекроет все html размерности

img{width:100%; height:auto;} аналогично

img{width:100% !important; height:auto !important; } вообще всё зашьет, но использование !important это тот еще моветон

S
На сайте с 23.05.2004
Offline
315
Stek
#2
silicoid:
img{width:100%; height:auto;} аналогично

Вариант помог с пропорциональным уменьшением. Но вот вот только теперь при полноразмерном экране картинка растягивается на весь экран, т.е. больше своих указанных размеров.

yet_warm
На сайте с 26.05.2007
Offline
129
yet_warm
#3
Stek:
Но на 4pda.ru он задан для картинок на первой странице. И там же они скейлятся корректно, но не понимаю как.

В div картинки обернуты с width: 100%; height:auto - он и жмет по идее...

А у картинок свои максимальные размеры.

Многие хотят попасть в рай, мало кто хочет для этого умирать.
S
На сайте с 23.05.2004
Offline
315
Stek
#4

В общем как всегда, в недрах stackoverflow найдено:


img {
    max-width: 100%;
    height: auto;
}

Корректно отображает как для десктопной лисы так и мобильного хрома. По сути ведь легко, надо было только внимательно посидеть и подумать :)

Но тем не менее удивлен, что очень много сайтов перестали задавать точные размеры картинок.

Яндекс добавил в десктопную Яндекс запустил колдунщик Директа Google добавил в десктопный
LEOnidUKG
На сайте с 25.11.2006
Offline
1762
LEOnidUKG
#5
Но тем не менее удивлен, что очень много сайтов перестали задавать точные размеры картинок.

Ничего удивительного, всё переделывается под мобильные телефоны.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/ ✅ Настройка и оптимизация серверов https://getmanyspeed.ru/
D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#6
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;

Ну и еще для адаптива:

iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}
}



---------- Добавлено 06.03.2018 в 16:41 ----------

"Точные" размеры картинки я указываю так:

<img src="/foto/777.jpg" width="1024" height="607" style="width: 100%; max-width: 1024px; height: auto; max-height: 607px;" border="0" alt="...">

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
как на картинки можно Подскажите Помогите! Не отображается тИЦ.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий