Как у картинки задать width + height + max-width и сохранить пропорции?

Указать max-width + max-height без использования width/height вообще?

использовать masonry.

Проблема с пропорциями решилась указанием { max-width: 100%; height: auto }.

Но осталась другая проблема- почему-то браузер не резервирует место под картинку, если указан неправильный «src». Это можно побороть без оберток?

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

Я не уверен, но, попробуй line-height равный высоте резервного места.

Нет. Оберни, это не сильно напряжно

Ну вот наконец ты нашел свое место. Вместо того чтобы тупить с программированием, заделайся дезигнером и рисуй картинки, верстай их. Все равно программист из тебя не получиться. А так — хоть какой-то прок будет. А то ведь все никак не мог угомониться: прототипы ко-ко-ко объекты ко-ко-ко

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

LOL, не, погорячился я с дезигнерством, тебе только метла поможет. Чтобы не скакало ничо, люди картинки сначала загружают все, а потом вставляют их разом, в нужное место/места.

Можно загнать их как бекграунд, но это конечно не сильно хорошее решение.

люди картинки сначала загружают все, а потом вставляют их разом, в нужное место/места.

Откуда вы такие лезете? На странице может быть превьюшек мегабайт на 30, вот и жди когда они прогрузятся.

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

Необязательно городить ленивую загрузку если нужно только «шоб страница не скакала».
Вообще без самой страницы можно только гадать что подойдёт лучше.

Тогда проще обернуть. Надо ж семантику сохранить.

Надо ж семантику сохранить.

Надо ж, какие мы словечки знаем. Операционную или денотационную семантику загрузки картинок сохранить хочешь?

Мне известны размеры картинок, вставленных к текст

Что мешает тебе прописать их значения в HTML?

Дык прописал в фаербаге. Потом поменял урл на левый, и картинко схлопнулось.

Это от браузеров зависит. В Firefox оно превращается в alt текст, AFAIR. В старой Опере, например, сохранялись размеры блока. Если не критично, то забей.

http://www.w3schools.com/jsref/event_onerror.asp

И этот текст, кстати, стилизуется

Смотри. Есть 50 постов с картинками на странице. Мне надо чтобы при открытии контент не скакал, ну и скорость была хорошей.

Для этого размеры надо зафиксировать. Но еще надо ширину на 100% ограничить. Естественно, это не должно зависеть от браузера.

Можно издокториться с паддингом в %, как делают для резинового видео, но я думал что можно проще.

Интересно, но не подходит. Надо чистый html / css.

50 постов с неправильными URL'ами? Да ладно?

издокториться

Что сделать?

http://jsfiddle.net/ung3zg5e/

Если хоть один из урлов окажется неверным, семантику не получится сохранить, особенно денотационную.

При этом, не исключено, что придется зело издокторяться

99% браузеров

Вот к чему приводит излишнее издокторение. Бывает издокторяешься, издокторяешься, да не выиздокториваешся.

Ну, у меня только фф и хромиум — оба справились, только у хромого окантовок нет у отсутствующих картинок. ЧЯДНТ?

У меня в лисе тоже ок. Кстати Edge/IE если добавить border то видно что он тоже корректно рендерит.

Так то в жопере проблемы или где?

По-моему только в хромом. Оперы нет.

Сделай окно узким, картинки начнут скейлиться только по горизонтали, а не пропорционально.

По частям сделать не проблема (либо резервировать размер, либо правильно ограничивать ширину). А вот одновременно что-то не получается.

окно узким

http://s4.postimg.org/3vlryagi5/Screenshot_13.png хромиум тоже ок.

Да Ять, найди уже пример резинки, миллионы их по всему интернету и правда метла тебе ближе.

Пускай там уже будет data:image в base64 под разрешение и цвет фона, а когда основное изображение подгрузиться то заменит затычку (как заменить ХЗ ::))

Еще уже, чтобы картинка по ширине не влазила и начало работать max-width.

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