Место на странице определяется не только шириной
Пусть временная картинка занимает прямоугольник шириной триста двадцать и высотой сто восемьдесят условных экранных единиц. Его пропорция равна шестнадцати к девяти. Под ним расположен абзац. Если окончательная фотография имеет другую пропорцию и показывается целиком без искажения, той же ширины для сохранения раскладки недостаточно. Нужно заранее понимать, какой высоты потребует изображение. Цвет заглушки, значок внутри неё и привлекательность оформления не отвечают на этот геометрический вопрос.
Посчитайте высоту окончательного изображения
В нашем примере исходная фотография имеет ширину восемьсот и высоту шестьсот единиц. Чтобы уменьшить её ширину до трёхсот двадцати, обе стороны нужно умножить на четыре десятых. Новая высота составит двести сорок. Это на шестьдесят больше, чем высота временного прямоугольника. Если блок картинки в обычном потоке страницы увеличится на эту величину, расположенный ниже абзац сдвинется вниз. Причина видна ещё до загрузки файла: пропорции временного и итогового изображения не совпали.
Согласуйте резервируемую область со способом показа
Если фотографию нужно показывать целиком в собственной пропорции, для нашего варианта стоит предусмотреть область триста двадцать на двести сорок. При уменьшении ширины до ста шестидесяти соответствующая высота станет сто двадцать. На настоящей странице размеры изображения и правила оформления помогают браузеру заранее определить занимаемое место. Существует и другой замысел: фиксированная рамка с обрезкой или свободными полями. Это отдельное решение о показе содержимого, которое нужно задать явно; сам факт наличия заглушки его не определяет.
Проверяйте замену, а не только готовый красивый экран
Окончательная карточка может выглядеть аккуратно, хотя во время загрузки её элементы заметно перемещались. Поэтому при проверке сравнивают состояние до появления изображения и после него. В нашем бумажном примере достаточно отметить верхнюю границу абзаца в обоих состояниях. В настоящем интерфейсе дополнительно проверяют разные ширины окна и поведение при недоступном файле. Устранение одного изменения высоты не гарантирует неподвижность всей страницы: другие элементы, включая текст и соседние блоки, могут изменять раскладку независимо.
Попробуйте на практике
Разберите карточку на бумаге без подключения к сервисам, скачивания картинок и написания программного кода.
- Запишите размеры заглушки: триста двадцать на сто восемьдесят. Нарисуйте условный абзац сразу под ней и отметьте, что рамка в данном примере не имеет заранее закреплённой высоты после замены.
- Запишите размеры окончательного изображения: восемьсот на шестьсот. Рассчитайте его высоту при ширине триста двадцать, сохраняя пропорции и показывая изображение целиком.
- Сравните двести сорок со ста восемьюдесятью. Объясните сдвиг абзаца на шестьдесят единиц и предложите временную область, размеры которой совпадут с итоговыми в этом сценарии.
- Повторите расчёт для ширины сто шестьдесят. Получите высоту сто двадцать и сформулируйте правило: временное место должно соответствовать выбранному способу отображения при данной ширине, а не произвольной форме красивой заглушки.
Как проверить результат. Получены высоты двести сорок и сто двадцать, а исходная разница равна шестидесяти. Вывод относится к показу целого изображения с сохранением пропорций; обрезка и фиксированная рамка не добавлены незаметно.
Частые вопросы
Заглушка той же ширины всегда предотвращает сдвиг?
Нет. В нашем примере ширина совпадает, а высота различается из-за другой пропорции. Нужно учитывать обе стороны занимаемой области.
Правильные пропорции картинки доказывают стабильность всей страницы?
Нет. Они помогают устранить конкретную причину изменения размера изображения. Поведение остальных блоков и всей страницы проверяют отдельно.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.