Как сделать колонки одинаковой высоты

В этом уроке я приведу различные способы, показывающие как можно сделать колонки одинаковой высоты. Все варианты будут разобраны для двухколоночного макета страницы, но они также будут работать для трёх и более колонок (с небольшой модификацией). Часть примеров реализуется на чистом CSS, другие используют JavaScript. Вы можете посмотреть каждый пример в редакторе Codepen, кликнув по картинке.

1. Псевдоэлемент и абсолютное позиционирование

Суть данного способа следующая: с помощью псевдокласса :after каждой колонке добавляется блок, который залит соответствующим цветом и имеет высоту, равную 100% высоте блока-контейнера. Для блока-контейнера задано свойство overflow: hidden;, которое и обрезает лишнюю высоту.

<header>Шапка страницы</header>
  <div class="container">
    <div class="main-content">
      <div>
        <h1>Основной контент</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </div>
    </div>
    <aside>
      <div>
        <h2>Боковая колонка</h2>
        <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
     </div>          
    </aside>
  </div>
<footer>Подвал страницы</footer>
body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.main-content {
  float: left;
  width: calc(100% - 330px);
  background: #C9CCC8;
}
aside {
  float: right;
  width: 300px;
  background: #EC5A45;
}
.main-content:after, aside:after {
  content: "";
  position: absolute;
  height: 100%;
}
.main-content:after {
  left: 30px;
  right: 360px;
  background: #C9CCC8;
}
aside:after {
  right: 30px;
  width: 300px;
  background: #EC5A45;
}
.main-content div, aside  div {
  padding: 30px 30px 0 30px;
}
footer {
  margin-top: 30px;
  padding: 30px 60px;
  background: #80C8A0;
}
.container:after {
  content: "";
  display: table;
  clear:  both;
}

В медиазапросе, например, для максимальной ширины 860px отменим обрезку содержимого контейнера, обтекание для колонок и скроем содержимое, добавленное с помощью псевдокласса. Ширину колонок сделаем равную ширине блока-контейнера.

@media (max-width: 860px) {
  .container {
    overflow: visible;
    }
  .main-content {
    float: none;
    margin-bottom: 30px;
    width: 100%;
    }
  aside {
    float: none;
    width: 100%;
    }
  .main-content div, aside  div {
  padding: 30px;
}
  .main-content:after, aside:after {
    display: none;
    }
  footer {
    margin-top: 0;
  }
} 

2. Внутренние и внешние отступы

Для каждой колонки устанавливаем нижнее поле padding с большим значением. В этом случае фон колонки будет распространяться на всю высоту поля. Далее задаём отрицательное нижнее поле с таким же значением. С его помощью мы уменьшаем высоту колонки до её фактических размеров, не затрагивая фоновую заливку. Свойство overflow: hidden;, заданное для блока-контейнера, обрезает высоту каждой колонки, ориентируясь на самую высокую.

body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
  overflow: hidden;
}
.main-content {
  float: left;
  width: calc(100% - 330px);
  background: #C9CCC8;
}
aside {
  float: right;
  width: 300px;
  background: #EC5A45;
}
.main-content, aside {
  padding-bottom: 99999px;
  margin-bottom: -99999px;
}
.main-content div, aside  div {
  padding: 30px 30px 0 30px;
}
footer {
  margin-top: 30px;
  padding: 30px 60px;
  background: #80C8A0;
}

В медиазапросе уберём нижние поля и отступы, отменим обрезку содержимого и установим ширину колонок, равную ширине блока-контейнера.

@media (max-width: 860px) {
  .container {
    overflow: visible;
    }
  .main-content {
    float: none;
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 0;
    }
  aside {
    float: none;
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
    }
  .main-content div, aside  div {
    padding: 30px;
}
  footer {
    margin-top: 0;
  }
}

3. По типу таблицы

В данном примере используется особенность html-таблиц, благодаря которой все ячейки одного ряда принимают одинаковую высоту, равную высоте самой высокой ячейки.

<header>Шапка страницы</header>
  <div class="container">
    <div class="main-content">
      <div class="content-wrap">
        <h1>Основной контент</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </div>
      <aside>
        <h2>Боковая колонка</h2>
        <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
      </aside>
    </div>
  </div>
<footer>Подвал страницы</footer>
body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
  margin-bottom: 30px;
}
.container {
  display: table;
  border-collapse: separate;
  border-spacing: 30px 0;
}
.main-content {
  display: table-row;
}
.content-wrap { 
  background: #C9CCC8;
}
aside {
  width: 300px;
  background: #EC5A45;
}
.content-wrap, aside {  
  display: table-cell;
  padding: 30px;
}
footer {
  margin-top: 30px;
  padding: 30px 60px;
  background: #80C8A0;
}

С помощью медиазапроса сделаем все элементы блочными и установим для боковой колонки ширину 100%.

@media (max-width: 860px) {
  .container {
    padding: 0 30px;
  }
  .container, .main-content, .content-wrap, aside {
    display: block;
  }
  .content-wrap {
    margin-bottom: 30px;
  }
  aside {
    width: 100%;
    box-sizing: border-box;
  }
}

4. Flexbox

В Flexbox-модели каждый дочерний элемент выстраивается в ряд (вдоль главной оси) колонками одинаковой высоты, равной высоте блока-контейнера. Зафиксируем ширину боковой колонки с помощью flex-basis: 300px; и добавим ей значение flex-shrink: 0;, которое предотвратит сужение.

<header>Шапка страницы</header>
  <div class="container">
    <div class="main-content">
      <h1>Основной контент</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    <aside>
      <h2>Боковая колонка</h2>
      <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    </aside>
  </div>
<footer>Подвал страницы</footer>
body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
}
.main-content {
  margin-right: 30px;
  background: #C9CCC8;
  padding: 30px;
}
aside {
  background: #EC5A45;
  padding: 30px;
  flex-basis: 300px;
  flex-shrink: 0;
}
footer {
  padding: 30px 60px;
  background: #80C8A0;
}

Укажем медиазапрос, в котором флекс-модель будет применяться к элементам для ширины области просмотра от 860px.

@media (min-width: 860px) {
  .container {
    display: flex;
  }
}
@media (max-width: 859px) {
  .main-content {
    margin: 0 0 30px 0;
  }
}

5. Плагин matchHeight

Самый простой способ, который будет работать во всех современных браузерах и IE8+. Скачать плагин можно со страницы разработчика. Эта библиотека позволяет устанавливать одинаковую высоту как в одном ряду, так и во всех рядах одновременно. Для всех колонок задаём одинаковый класс (в данном примере item), который будет использоваться при активации плагина:

jQuery(document).ready(function($) {
  $('.item').matchHeight();
});
<header>Шапка страницы</header>
  <div class="container">
    <div class="item main">
      <h1>Основной контент</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    <aside class="item">
      <h2>Боковая колонка</h2>
      <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    </aside>
  </div>
<footer>Подвал страницы</footer>
*{box-sizing:border-box}
body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
}
.container:after {
  content:"";
  display: table;
  clear: both;
}
.item {
  background: #EC5A45;
  padding: 30px;
}
.main {
  float: left;
  width: calc(100% - 330px);
}
aside {
  width: 300px;
  float: right;
}
footer {
  padding: 30px 60px;
  background: #80C8A0;
}

С помощью медиазапроса отменим обтекание колонок и укажем определение высоты колонок в зависимости от высоты их содержимого.

@media (max-width: 860px) {
  .item {
    height: auto !important;
    float: none;
    width: 100%;
  } 
  .main {
    margin-bottom: 30px;
  }
}

6. jQuery функция css()

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

<header>Шапка страницы</header>
<div class="container">
  <div class="main">
    <h1>Основной контент</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
  <aside>
    <h2>Боковая колонка</h2>
    <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
  </aside>
</div>
<footer>Подвал страницы</footer>
*{box-sizing:border-box}
body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
}
.container:after {
  content:"";
  display: table;
  clear: both;
}
.main {
  float: left;
  width: calc(100% - 330px);
  background: #EC5A45;
  padding: 30px;
}
aside {
  width: 300px;
  float: right;
  background: #EC5A45; 
  padding: 30px;
}
footer {
  padding: 30px 60px;
  background: #80C8A0;
}

С помощью медиазапроса отменим обтекание колонок и укажем определение минимальной высоты колонок в зависимости от высоты их содержимого.

@media (max-width: 860px) {
  .main, aside {
   min-height: auto !important;
   float: none;
   width: 100%;
 } 
  .main {
   margin-bottom: 30px;
 }
}
jQuery(document).ready(function($) {
  var content = $('.main');
  var sidebar = $('aside');
  var getContentHeight = content.outerHeight();
  var getSidebarHeight = sidebar.outerHeight();
  
  if (getContentHeight > getSidebarHeight) {
    sidebar.css('min-height', getContentHeight);
    }
  if (getSidebarHeight > getContentHeight) {
    content.css('min-height', getSidebarHeight);
    }
});

Поделиться:

Единицы измерения vh, vw, vmin, vmax

В CSS3 были добавлены новые относительные единицы измерения, такие как vh, vw, vmin, vmax. Эти единицы вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw, то он выйдет за пределы html.

Рис. 1. Полноэкранное фоновое изображение с шириной 100vw

Поддержка браузерами

IE: 9.0 кроме vmax, вместо vmin используйте vm
Edge: 12.0 кроме vmax, вместо vmin используйте vm
Firefox: 19.0
Chrome: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome for Android: 55.0

Таблица 1. Относительные единицы измерения
Единица Описание
vh Эквивалентно 1% высоты окна браузера.
vw Эквивалентно 1% ширины окна браузера.
vmin Эквивалентно 1% меньшего размера окна браузера по высоте или ширине.
vmax Эквивалентно 1% большего размера окна браузера по высоте или ширине.

1. Единицы vh и vw

Приёмы отзывчивого веб-дизайна базируются на использовании процентных значений. Но проценты далеко не лучшее решение для каждого случая, так как они вычисляются относительно размеров ближайшего родительского элемента. Поэтому, если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw. Например, если высота окна браузера равна 900px, то 1vh будет равен 9px. Аналогично, если ширина окна браузера равна 1600px, то 1vw будет равен 16px.

1.1. Адаптивное полноэкранное фоновое изображение

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

.fullscreen-bg {
  background: url(image.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
Рис. 2. Адаптивно полноэкранное фоновое изображение

1.2. Эффект полностраничного слайда

Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100%; для трёх элементов — html, body и непосредственно для самого блока:

html, body {
  height: 100%;
}
section {
  height: 100%;
}

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

section {
  height: 100vh;
}

Эффект перелистывания слайдов при клике на стрелку реализуется с помощью небольшого скрипта jQuery:

jQuery(document).ready(function($) {
  $('nav').on('click', function() {
    if ($(this).hasClass('down')) {
      var movePos = $(window).scrollTop() + $(window).height();
    }
    if ($(this).hasClass('top')) {
      var movePos = $(window).scrollTop() - $(window).height();
    }
    $('html, body').animate({
      scrollTop: movePos}, 600);
  });
});

See the Pen aBxxGv by Elena (@html5book) on CodePen.

Высоту, заданную с помощью vh также можно использовать для выравнивания элемента по центру страницы:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Теперь любой элемент будет расположен строго по центру без каких-либо дополнительных приёмов.

See the Pen NbmJad by Elena (@html5book) on CodePen.

2. Единицы vmin и vmax

В то время, как единицы vh и vw всегда вычисляются относительно соответствующих размеров окна браузера, vmin и vmax определяются минимальным или максимальным значением высоты или ширины. Например, если ширина окна браузера равна 1200px, а высота 700px, то vmin будет равен 7px, а vmax12px.

Рис. 3. Единицы vmin и vmax

Поделиться:

Свойство background-blend-mode

Свойство background-blend-modeрежим смешивания фоновых слоёв — алгоритм, определяющий механизм взаимодействия пикселей каждого слоя. Фон бокса одного элемента может иметь несколько слоёв. Количество слоёв определяется количеством значений, разделенных запятыми в свойстве background-image. Если для элемента задано несколько фоновых слоёв, первый фон из списка будет применяться к верхнему слою.

div {
  width: 300px;
  height: 400px;
  background-image: linear-gradient(45deg, #f8a261, #6e9fc9),  url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg); /* в данном примере мы увидим только градиентную заливку */
}

Свойство background-blend-mode делает верхний (активный) слой полупрозрачным, что позволяет показывать сквозь него нижележащие слои. Обязательное условие — фоновых слоёв должно быть минимум два:

div {
  width: 300px;
  height: 400px;
  background-image: linear-gradient(45deg, #f8a261, #6e9fc9), url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg);
  background-blend-mode: overlay;
}
Рис. 1. Режим смешивания для градиента и картинки

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

div {
  width: 300px;
  height: 400px;
  background-image: url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg), linear-gradient(45deg, #f8a261, #6e9fc9);
  background-blend-mode: overlay;
}
Рис. 2. Режим смешивания для картинки и градиента

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

div {
  width: 300px;
  height: 400px;
  background-image: linear-gradient(45deg, #f8a261, #6e9fc9), linear-gradient(135deg, #08526b, #fbcd7c), url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg);
  background-blend-mode: overlay, color;
}
Рис. 3. Два режима смешивания для двух градиентов и картинки

Свойство background-blend-mode может применяться к любому html-элементу, не анимируется и не наследуется.

Поддержка браузерами

IE: не поддерживает
Edge: не поддерживает
Firefox: 30.0
Chrome: 35.0
Safari: 7.1 частичная поддержка
Opera: 22.0
iOS Safari: 8.0 частичная поддержка
Opera Mini: не поддерживает
Android Browser: 53.0
Chrome for Android: 54.0

1. Виды режимов смешивания

Для каждого режима используются математические расчёты, которые вычисляются в диапазоне от 0 до 1, где 0 соответствует чёрному цвету, 1 — белому. Все режимы смешивания можно разделить на следующие группы:
1) Нормальный режим — normal;
2) Режим контраста — overlay, soft-light, hard-light;
3) Режим затемнения — darken, multiply, color-burn;
4) Режим осветления — lighten, screen, color-dodge;
5) Режим сравнения — difference, exclusion;
6) Компонентный режим — hue, saturation, color, luminosity.

background-blend-mode
normal Значение по умолчанию, которое указывает на отсутствие смешивания, так как верхний слой остаётся непрозрачным.
overlay Режим перекрытия. Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. Так как режим работает в среднем диапазоне этих двух режимов, то полутона (50% серого) становятся прозрачными.
soft-light Режим мягкий свет. Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. Похож на overlay, но придаёт более натуральный мягкий эффект, напоминающий сияние рассеянного светового пятна на фоне. Полутона также становятся прозрачными.
hard-light Режим жёсткий свет. Цвета умножаются или осветляются, в зависимости от источника цвета. Эффект похож на сияние резкого светового пятна на фоне. Полутона также становятся прозрачными.
darken Режим затемнения. Если пиксели верхнего слоя темнее, чем на нижележащих слоях, они сохраняются в изображении. Если пиксели в верхнем слое светлее, они заменяются на более тёмные пиксели нижнего слоя, поэтому в основном сохраняются темные тона всех слоёв.
multiply Режим умножения. Работает путём умножения уровней яркости пикселов верхнего слоя с пикселами нижележащих слоёв. Отлично подходит для создания теней и удаления белых и других светлых тонов (сохраняя при этом более тёмные цвета). Умножение любого цвета на черный даёт черный. Умножение любого цвета на белый сохраняет оригинальный цвет.
color-burn Режим «выжигания» основы. Заменяет цвета на противоположные, затемняя верхний слой, не меняя светлые (белые) оттенки.
lighten Режим замены светлым. Тёмные пиксели верхнего слоя заменяются на светлые пиксели нижележащих слоёв. Светлые пиксели не заменяются.
screen Режим экрана. Эффект аналогичен режиму lighten с отличием в том, что удаляет больше тёмных пикселей, создавая плавный переход. Работает как режим multiply, но удаляет тёмные тона.
color-dodge Режим осветления основы. Насыщает светлые тона и блики. Темные области изображения остаются без изменений.
difference Режим вычитания. Отображает тональную разницу между двумя слоями, удаляя белые пиксели из слоя. Результирующее изображение получается тёмным и противоположным по тону. Делает избирательную инверсию, при которой светлые цвета инвертируются в более тёмные и насыщенные, а тёмные остаются без изменения.
exclusion Режим исключения. Сравнивает пиксел активного слоя и эквивалентный пиксел нижележащего слоя с учётом их яркости, делая избирательную инверсию. Черный никогда не инвертируется, белый — всегда. Одинаковые цвета компенсируют друг друга, давая серый цвет. Производит эффект, похожий на режим difference, но более мягкий.
hue Режим цветового тона. Сохраняет оттенок активного слоя и добавляет ему яркость и насыщенность нижележащих слоев (получается изображение из нижнего слоя с цветами верхнего слоя).
saturation Режим насыщенности. Создаёт цвет с насыщенностью исходного цвета и оттенком и яркостью нижележащего цветового фона. Серые оттенки остаются без изменений.
color Режим цветности. Создаёт цвет с оттенком и насыщенностью исходного цвета и яркость нижележащего цветового фона. Сохраняет серые тона нижележащих слоёв.
luminosity Режим яркости. Создаёт цвет с яркостью исходного цвета и оттенком и насыщенностью нижележащего цветового фона. Эффект противоположен режиму color.
Рис. 4. Виды режимов смешивания

Примеры использования режимов смешивания

1. Эффект холста

div {
  width: 550px;
  height: 550px;
  background-image: url(https://html5book.ru/wp-content/uploads/2016/12/romantika.jpg), 
  url(https://html5book.ru/wp-content/uploads/2015/12/background63.jpg);
  background-blend-mode: color-burn;
}

2. Ретро-эффект

div {
  width: 550px;
  height: 550px;
  background-image: url(https://html5book.ru/wp-content/uploads/2016/12/romantika.jpg), radial-gradient(rgba(255,255,255,.3) 20px, transparent 20px);
  background-size: 100% 100%, 60px 60px;
  background-position:0 0, 5px 5px;
  background-blend-mode: hard-light;  
}

3. Сетчатый эффект

div {
  width: 550px;
  height: 550px;
  background-image: url(https://html5book.ru/wp-content/uploads/2016/12/romantika.jpg), radial-gradient(black 1px, transparent 1px);
  background-size: 100% 100%, 4px 4px;
  background-blend-mode: darken;  
}

4. Градиентный узор

html, body {height:100%}
body {
  margin: 0;
  background:
  repeating-linear-gradient(60deg,
  #E7F0ED 0em, #E7F0ED 1em,
  #D8BBB5 1em, #D8BBB5 2em,
  #D1AFA6 2em, #D1AFA6 3em,
  #F1B6A8 3em, #F1B6A8 4em,
  #FFEFD7 4em, #FFEFD7 5em),
  repeating-linear-gradient(-60deg,
  #E7F0ED 0em, #E7F0ED 1em,
  #D8BBB5 1em, #D8BBB5 2em,
  #D1AFA6 2em, #D1AFA6 3em,
  #F1B6A8 3em, #F1B6A8 4em,
  #FFEFD7 4em, #FFEFD7 5em);
  background-blend-mode: multiply;
}

Поделиться:

Свойства object-fit и object-position

1. Свойство object-fit

Свойство object-fit определяет, каким образом содержимое замещаемых элементов будет подогнано к краям контейнера тега в случае, когда для элемента заданы ширина и высота, отличные от его собственных размеров.

Замещаемыми элементами являются элементы, чьи размеры и внешний вид определяются внешним ресурсом. К ним относятся элементы <img> <input type="image">, <embed>, <iframe>, <video>, <canvas> и <object> в случае когда они содержат встраиваемое содержимое, а также элемент <audio>, использующий пользовательские элементы управления.

Свойство object-fit масштабирует, обрезает или растягивает содержимое замещаемых элементов. Свойство хорошо поддерживается в последних версиях Chrome, Firefox и Safari. Для браузера IE8-11 можно использовать полифил (библиотеку, добавляющую в старые браузеры поддержку свойств, работающих в современных браузерах).

Поддержка браузерами

IE: не поддерживает
Firefox: 36.0
Chrome: 31.0
Safari: 7.1 только object-fit, 10.0 полная поддержка
Opera: 19.0
iOS Safari: 8.0 только object-fit, 10.1 полная поддержка
Opera Mini: -o-
Android: 4.4.4
Chrome for Android: 54.0

object-fit
fill Значение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину.
contain Содержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера.
cover Содержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.
scale-down Содержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры.
none Замещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

See the Pen BQGdYy by Elena (@html5book) on CodePen.

2. Свойство object-position

Свойство object-position используется в сочетании с object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50%. Свойство анимируется. Не наследуется.

object-position
Значения:
left top,
left center,
left bottom,
right top,
right center,
right bottom,
center top,
center center,
center bottom
Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center.
px / em/ % Указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части контента.
Процентное значение рассчитывается относительно содержимого и контейнера, в котором оно расположено. Одновременно можно комбинировать значения в px, em и %.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

See the Pen vyQWme by Elena (@html5book) on CodePen.

Поделиться: