LINUX.ORG.RU

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

 


1

1

Хочется решить одновременно 2 проблемы:

1. Ограничить картинки по ширине (max-width 100%)
2. Избавиться от reflow по мере догрузки картинок (указать размеры сразу).

Проблема в том, что если я указываю width/height, то после этого max-width жмет картинку только по ширине, а надо чтобы высота тоже менялась пропорционально. Как это починить?

★★★★★

Последнее исправление: Vit (всего исправлений: 1)

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

deep-purple ★★★★★
()

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

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

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

Vit ★★★★★
() автор топика
Ответ на: комментарий от Vit

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

deep-purple ★★★★★
()
Ответ на: комментарий от Vit

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

anonymous
()

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

anonymous
()
Ответ на: комментарий от Vit

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

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

anonymous
()
Ответ на: комментарий от anonymous

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

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

ritsufag ★★★★★
()
Ответ на: комментарий от ritsufag

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

anonymous
()
Ответ на: комментарий от anonymous

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

ritsufag ★★★★★
()
Ответ на: комментарий от Vit

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

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

anonymous
()
Ответ на: комментарий от Vit

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

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

Deleted
()
Ответ на: комментарий от Vit

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

Deleted
()
Ответ на: комментарий от Deleted

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

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

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

Vit ★★★★★
() автор топика
Ответ на: комментарий от Jaberwock

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

Vit ★★★★★
() автор топика
Ответ на: комментарий от Deleted

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

anonymous
()
Ответ на: комментарий от ritsufag

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

anonymous
()
Ответ на: комментарий от deep-purple

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

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

Vit ★★★★★
() автор топика
Ответ на: комментарий от Vit

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

anonymous
()
Ответ на: комментарий от Vit

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

Dron ★★★★★
()
Ответ на: комментарий от deep-purple

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

Vit ★★★★★
() автор топика
Ответ на: комментарий от Deleted

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

Vit ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.