Практика: место под изображение до его выбора
В редакторе или прототипе полезно заранее показать область будущего изображения. Пустое состояние должно объяснять, что ресурс ещё не выбран, а не выглядеть как сломанная картинка или вечная загрузка.
Назначение
В редакторе или прототипе полезно заранее показать область будущего изображения. Пустое состояние должно объяснять, что ресурс ещё не выбран, а не выглядеть как сломанная картинка или вечная загрузка.
Как это работает
Aspect-ratio резервирует пропорции, а CSS Grid располагает пояснение по центру. Это статический макет: он не выбирает файл и не запускает загрузку. Текст остаётся настоящим содержимым DOM.
Пример
<style>.media-slot{box-sizing:border-box;max-width:32rem;aspect-ratio:16/9;display:grid;place-items:center;padding:1rem;border:2px dashed #789d86;background:#f0f6f2}.media-slot p{margin:0;text-align:center}</style>
<section><h2>Иллюстрация урока</h2><div class="media-slot"><p>Изображение ещё не выбрано.</p></div><p>После добавления проверьте описание и соответствие пропорциям.</p></section>Что должно получиться
Область сохраняет учебные пропорции при обычном объёме текста. Пояснение сразу сообщает причину пустоты. При большом тексте размеры могут подстроиться под минимальные потребности содержимого.
Граница применения и частая ошибка
Не назначайте пустому декоративному контейнеру роль изображения, если он лишь сообщает состояние. Не обещайте progressbar без измеряемого процесса. При появлении настоящего img нужно выбрать alt по смыслу изображения, а не копировать текст заглушки.
Самостоятельная проверка
Сузьте окно и увеличьте шрифт. Замените короткую фразу длинным пояснением и проверьте отсутствие обрезки. В отдельном проекте добавьте реальное изображение с width и height и сравните сдвиг макета.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.