Интервьюер: Как CSS реализует фиксированное соотношение сторон?

CSS

Для этого вопроса у вас может не быть соответствующих требований или его не задавали во время собеседования, но Crooked Horse считает, что в конечном итоге он вам понадобится.

Этот вопрос тоже банален, Crooked Horse снова поднимает его сегодня, и я надеюсь, что когда-нибудь, когда вас спросят, вы сможете красиво на него ответить.

Если однажды вас спросят: «Можете ли вы сказать мне, как реализовать элемент с фиксированным соотношением сторон?»

Когда вы слышите это, вы не должны слепо говорить ответ. Потому что вопрос не ясен. Так вы сможете помочь интервьюеру дополнить вопросы или задать вопросы для подтверждения требований. Вы можете ответить так:

  • Если известен размер элемента, то и говорить нечего, просто посчитайте ширину и высоту и напишите.
  • Если размер элемента неизвестен, проще всего использовать JavaScript для достижения, если использовать CSS, то его можно разделить на следующие:
    • Если это сменный элемент<img>или<video>, как этого добиться?
    • Если это обычный элемент, то как его реализовать?

Сегодня Crooked Horse рассмотрит с вами вышеуказанные ситуации.

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

мы фокусируемся наРазмер элемента неизвестенСлучай.

Таким образом, эта статья в основном разделена на то, как добиться фиксированного соотношения сторон между сменными элементами и обычными элементами.

1. Сменные элементы для достижения фиксированного соотношения сторон

сменные элементы (например,<img>,<video>) и другие элементы, они сами имеют понятие ширины и высоты в пикселях. Поэтому, если вы хотите добиться фиксированного соотношения сторон для этого типа элемента, это относительно просто.

мы можемУкажите его значение ширины или высоты, и другая сторона будет рассчитана автоматически..

Таким образом, мы фиксируем ширину элемента изображения, а высота является адаптивной:

<div class="img-wrapper">
  <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>

.img-wrapper {
  width: 50vw;
  margin: 100px auto;
  padding: 10px;
  border: 5px solid lightsalmon;
  font-size: 0;
}

img {
width: 100%;
height: auto;
}

Эффект показан на рисунке ниже: видно, что при дальнейшем увеличении видимой области изображение становится больше, а исходный масштаб сохраняется.

图片元素固定宽高比
Элемент изображения с фиксированным соотношением сторон

Вы могли не заметить, мы даримimgэлемент установленheight: auto;, это сделано для того, чтобы разработчики или системы управления контентом не могли добавлять изображения в исходный код HTML.heightАтрибуты могут быть переопределены таким образом, чтобы избежать ошибок.

Кроме того, дляvideoЭлементы похожи, можно попробовать, эффект следующий.

video元素固定宽高比
фиксированное соотношение сторон видеоэлемента

Во-вторых, общие элементы достигают фиксированного соотношения сторон.

Хотя выше мы реализовали фиксированное соотношение сторон для заменяемых элементов, это соотношение в основном связано с тем, что сам заменяемый элемент имеет размер, и это соотношение также ограничено исходным соотношением размеров. Очевидно, что это не гибко, так как же нам реализовать фиксированное соотношение сторон для обычных элементов.

Сначала рассмотрим самые классическиеpadding-bottom/padding-topспособ взлома.

2.1 padding-bottomРеализация фиксированного соотношения сторон для общих элементов

В предыдущих сопутствующих главахОсвоение CSS Глава 3 Видимая модель форматирования, мы упомянулиВертикальные поля в процентах рассчитываются на основе ширины содержащего блока..

Ниже приведеныpadding-bottomНапример

посредствомpadding-bottomМы можем реализовать элемент с фиксированным соотношением сторон, чтобыdivНапример.

HTML:

<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>

CSS:

.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}

Эффект следующий:

固定宽高比的div
div с фиксированным соотношением сторон

Как и в приведенном выше коде, мы будемdivВысота элемента устанавливается равной0,пройти черезpadding-bottomчтобы открыть высоту коробки, и понял4/3фиксированное соотношение сторон.

Это обеспечивает фиксированное соотношение сторон, но его只是一个徒有其表的空盒子，里面没有内容。如果想在里面放入内容，我们还需要将Содержимое внутри div использует абсолютное позиционирование для заполнения элемента контейнера фиксированного размера.

следующим образом:

.intrinsic-aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Таким образом, мы можем реализовать контейнер фиксированного размера, который можно заполнить содержимым.

Кроме того, соотношение размеров, мы также можем передатьcalc()для расчета, что является более гибким. Мы можем быстро записать любое соотношение, напримерpadding-bottom: calc(33 / 17 * 100%);.

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

Есть ли способ заставить ширину двигаться вместе с высотой?Ответ — нет, по крайней мере, не сейчас. Но в будущем будет. Далее рассмотрим еще один более простой и удобный способ.

2.2 aspect-ratioатрибут указывает соотношение сторон элемента

Из-за давней потребности в фиксированном соотношении сторон,padding-bottomСпособ взлома также довольно неинтуитивен и требует вложения элементов.

Рабочая группа W3C по CSS уже работает над реализацией такого свойства, чтобы избежать этой проблемы.aspect-ratio. Схема была предложена, но не реализована в браузерах, она все еще находится в узле дизайна, черновик рабочей группы еще не выпущен.Изменить черновик.

Но это не мешает нам узнать об этой новой технологии заранее.

Давайте посмотрим, насколько это удобно.

aspect-ratioСинтаксис следующий:aspect-ratio: <width-ratio>/<height-ratio>.

Как следует, мы можемwidthилиheightустановить какauto, затем укажитеaspect-ratio. Другое значение автоматически изменится пропорционально.

/* 高度随动 */
.box1 {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

/* 宽度随动 */
.box2 {
height: 100%;
width: auto;
aspect-ratio: 16/9;
}

Этот метод может быть очень гибким для достижения фиксированного соотношения сторон элементов и может указывать либо ширину, либо высоту. Просто браузерной реализации пока нет, будем ждать вместе.

3. Резюме

В этой статье кратко описано, как добиться фиксированного соотношения сторон элементов. Если вас спросят в процессе собеседования. Вы можете ответить так.

  • Если известен размер элемента, то и говорить нечего, просто посчитайте ширину и высоту и напишите.
  • Если размер элемента неизвестен, проще всего его добиться с помощью JavaScript, а если вы используете CSS, то его можно разделить на следующие типы:
    • Если это сменный элемент<img>или<video>,могуwidth/heightОдин для установки размера, другой дляauto, сменный элемент изменяется в соответствии со своим внутренним размером.
    • Если это обычный элемент, мы можем передатьpadding-top/padding-bottomметод для имитации фиксированного соотношения сторон, но этот метод не является гибким и может изменять только высоту с шириной. Рабочая группа CSS теперь представляет новый подходaspect-ratio, вы можете легко указать соотношение сторон, но браузерной реализации пока нет. Я верю, что в ближайшем будущем будут постепенно внедряться браузеры.

Если ваш окончательный ответ таков, то вы не только усовершенствовали конструкцию вопросов учителя, дали пути решения различных ситуаций, но и указали на разрабатываемые в стандарте новые решения. Такой ответ не только свидетельствует о вашей тщательной проработке вопроса, но и показывает, что вы всегда уделяете внимание формулировке стандартов, что является большим плюсом. Таким образом, я могу только сказать, что вы стабильны в этом интервью.

Ссылка на ссылку

Если вам это нравится, отсканируйте QR-код, чтобы подписаться на мой официальный аккаунт. Будет еще лучше, если вы сможете переслать и поделиться им. Я буду сопровождать вас, чтобы регулярно читать и делиться другими знаниями о внешнем интерфейсе, с нетерпением ожидая прогресса вместе с вами.

Категории