Существует несколько фундаментальных проблем с встраиванием изображений в страницы гипер текста ; возможно, главный из них таков: текст очень легкий и загружается довольно быстро; изображения намного тяжелее и появляются намного позже. Следовательно, миллионы ( миллиардов? ) раз в день несчастный веб-серфер начнет читать какой-то текст на странице, а затем —
— упс! — изображение появляется над ним, толкая указанный текст вниз по странице, и наш бедный читатель теряет свое место.
По умолчанию частично загруженные страницы воспринимаются как скользкая рыба или пролитая банка прыгающих бобов. В остальной части этой статьи я буду называть эту резкую, нехорошую прыгучесть по имени: jank . И я намечу путь в безудержное будущее, в котором легко и естественно создать элементы, которые загружаются так:
Дженк — это очень старая проблема, и есть очень старое решение этой проблемы: атрибуты width и height в . Идея такова: если мы вставим размеры изображения прямо в HTML, браузеры смогут узнать эти размеры до загрузки изображения и зарезервировать для него некоторое пространство в макете, чтобы ничто не ударялось о страницу, когда изображение наконец-то появляется.
ширинаУказывает предполагаемую ширину изображения в пикселях. Если задано вместе с высотой
это позволяет агентам пользователя зарезервировать пространство экрана для изображения до того, как данные изображения поступят по сети.
— спецификация HTML 3.2, опубликованная 14 января 1997 г.
К сожалению для нас, когда width и height были впервые заданы и реализованы, макеты были в основном фиксированными, и изображения обычно предназначались только для отображения в их фиксированных, реальных размерах. Когда размер изображения получает жидкость, ширина и высота становятся странными:
См. Ширина жидкости пера + фиксированная высота = искажение Эрика Портиса (@eeeps) в CodePen.
ширина и высота слишком жесткие для восприимчивого мира. То, что нам нужно и нужно в течение очень долгого времени, — это способ задания фиксированных форматных соотношений для сопряжения с нашей жидкостью ширины .
У меня есть хорошие новости, плохие новости и хорошие новости.
Хорошая новость заключается в том, что есть способы сделать это сейчас, которые работают в любом браузере. Ответственные сайты и ответственные разработчики прилагают усилия, чтобы сделать их.
Плохая новость заключается в том, что все эти приемы ужасны, громоздки. Их трудно запомнить, трудно понять, и они могут взаимодействовать с другими частями CSS неожиданными способами.
Итак, хорошая новость: есть две функции веб-платформы на горизонте, которые пытаются сделать изображения с фиксированным соотношением сторон и фиксированной шириной изображения естественной частью веб-платформа.
Содержание статьи
Соотношение сторон в CSS
Первая предложенная функция? Свойство aspect-ratio в CSS!
Это позволило бы нам написать CSS следующим образом:
img {
ширина: 100%;
}
.большой палец {
соотношение сторон: 1/1;
}
.hero {
соотношение сторон: 16/9;
}
Это будет чудесно, когда нам нужно установить пропорции для целых классов изображений, размер которых соответствует размерам заранее определенных слотов макета, например, .thumb . и .hero изображения выше.
Увы, более сложная проблема, по моему опыту, это не изображения с заранее определенным соотношением сторон. Это изображения — возможно созданные пользователем изображения — которые могут иметь любое соотношение сторон . Действительно сложная проблема заключается в неизвестном соотношении сторон, когда вы пишете свой CSS, которое может варьироваться на изображение . Использование аспектного соотношения для резервирования места для изображений, подобных этому, требует встроенных стилей:
А встроенные стили дают мне хиби-джиби! Как веб-разработчик определенного возраста, у меня есть крошечный человечек в синей шапочке, постоянно встроенный глубоко в мой задний мозг, который плачет в агонии всякий раз, когда я пишу атрибут style = "" . И знаешь, что? У старика есть смысл! Вставляя встроенные стили сверхвысокой специфичности в мой контент я отключаю свою (или чью-либо еще) способность изменять эти соотношения сторон по любой причине позже.
Как мы можем указать пропорции на более низком уровне? Как мы можем дать браузерам информацию о размерах изображения, не давая им четких инструкций о том, как его стилизовать?
Я вам скажу: мы могли бы дать браузерам внутреннее соотношение сторон изображения в нашем HTML-коде, вместо того, чтобы указывать внешнее соотношение сторон!
Краткое примечание о внутренней и внешней калибровке
Что я подразумеваю под «внутренним» и «внешним»?
Свойственный размер изображения проще говоря, насколько велик был бы размер, если бы вы поместили его на страницу и вообще не применяли к нему CSS. Изображение 800 × 600 имеет собственную ширину 800 пикселей .
Внешний размер изображения следовательно, это то, насколько большим оно становится после применения CSS. Прикрепите правило width: 300px к тому же изображению 800 × 600, и его собственный размер (доступный через свойство Image.naturalWidth в JavaScript) не изменится: его собственный размер все еще 800px. Но теперь это изображение имеет внешний размер (доступный через Image.clientWidth ) в 300px .
Меня удивило, когда я узнал в этом году, что высота и ширина интерпретируются как наглядные подсказки и что в итоге они устанавливают внешние измерения (хотя и те, которые, в отличие от встроенных стилей, не имеют абсолютно никакой специфики).
Соотношение сторон CSS позволяет нам не устанавливать внешние высоты и ширины — вместо этого мы даем изображениям (или чему-либо еще) внешнее соотношение сторон так что, как только мы установите одно измерение (возможно, на ширину жидкости, например 100% !), другое измерение будет установлено автоматически относительно него.
Последний инструмент, о котором я собираюсь рассказать, выводит нас из внешней игры определения размеров вместе, что, я думаю, подходит только для функции, которую мы собираемся использовать в HTML.
встроенный размер в HTML
Предложенный атрибут intrinsicsize позволит вам сделать это:
Это говорит браузеру: «Привет, это image.jpg которое я использую здесь — я знаю, что вы еще не загрузили его, но я просто хочу сообщить вам, что он будет иметь собственный размер 800 × 600 ». Это дает браузеру достаточно информации, чтобы зарезервировать место на макете для изображения, и гарантирует, что любые и все внешние инструкции по размеру, указанные в нашем CSS, наложим поверх этого собственный размер изображения.
Вы можете спросить (я сделал!): Подождите, что если мои ссылаются на несколько ресурсов, которые имеют разные внутренние размеры? Что ж, если вы используете
srcset intrinsicsize это немного неправильно — то, что тогда будет делать атрибут, это указать внутреннее соотношение сторон :
![]()
В будущем (и за флагом «Экспериментальные возможности веб-платформы» прямо сейчас, в Chrome 71+) запрос этого изображения для его .naturalWidth не будет а не вернет 3 — он вернет значение 75vw учитывая текущую ширину области просмотра. И Image.naturalHeight вернет ту ширину разделенную на внутреннее соотношение сторон: 3/2.
Не могу дождаться
Кажется, я немного увлекся сорняками. Определение размеров в сети сложно!
Не позволяйте всем этим деталям похоронить здесь большой вынос: в скором времени (? 2019‽ ?) мы сможем бросить наши ужасные хакерские пропорции в мусорную корзину истории, привыкнуть к привычке установив аспектных отношений в CSS и / или встроенных в HTML, и просматривайте менее разочаровывающую, более производительную, менее джанки сеть. Я не могу ждать!
Загрузка...
