Как выводите картинки не не больше необходимого размера, css

тэгам img можно jquery приписывать новый атрибут

Спасибо, за желание подсказать, решил проблему кодом:

в css img

Тоже решение

Закачиваю картинку изначально нужных размеров.

Самый чёткий вариант! Некоторые умельцы закачивают картинки размером 2048x2048 и ужимают через css их до 50x50 и потом вопросы задают - "чё у меня сайт тормозит" 🙅

изображению задайте:

max-width: 100%;
height: auto;

и будет вам щастье: картинка шириной не больше контейнера + сохранение пропорций. и плевать что в атрибутах - сожмётся до размера умещающегося в ширину контейнера и будет подстраиваться при ресайзе окна броузера (например).

max-width: 100%;

height: auto;

А если размер контейнера 1000px а рисунка 2000px, то он же разорвет контейнер, не? :)

1) Браузер не так качественно сжимает фото, как специальная программа для графики.

2) Зачем закачивать лишнее, если можно обойтись меньшим весом картинки?

Например, в Ирфанвью есть пакетный режим работы с графикой. Выставляешь параметры обработки картинок, затем забираешь в указаннй папке оптимизированные изображения.

да хоть 2000000px 😂 если батька сказал что макс ширина 100% от контейнера - нехай корячится...

под все экраны на всех устройствах thumbs-ов не нарежешь и реальной (плавной) адаптивности с ними не добьёшся.

и кто сказал 😮 что не надо media query подбирать оптимальный размер из возможных, а уж потом её css-ом слегка рихтовать по ситуации?