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

Articles

Эта статья объясняет свойства object-fit и object-position.

Вы можете узнать, как размещать объекты, такие как изображения и видео, и как писать их в CSS.

YouTube Video

HTML для предварительного просмотра

css-object-fit-position.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Связано с подгонкой объекта

Свойство `object-fit`

CSS-свойство object-fit используется для управления тем, как изображения, видео и другой контент вписываются в элементы-контейнеры. Используя это свойство, вы можете гибко указывать, как изменяется размер элементов и как они эстетично располагаются. Это свойство очень полезно для настройки отображения изображений или видео путем обрезки или масштабирования, когда они не вписываются в родительский элемент.

Значения свойства `object-fit`

`fill` (Значение по умолчанию)

1img {
2  object-fit: fill;
3}

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

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

`contain`

1img {
2  object-fit: contain;
3}

contain изменяет размер контента так, чтобы он полностью помещался в родительский элемент, сохраняя соотношение сторон. Контент не превышает размер родительского элемента, и может появиться заполнение (padding) по вертикали или горизонтали.

Полный контент отображается.
Для сохранения исходного соотношения сторон может появиться заполнение (эффект letterbox или pillarbox).

`cover`

1img {
2  object-fit: cover;
3}

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

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

`none`

1img {
2  object-fit: none;
3}

none отображает изображения или видео в их оригинальном размере и соотношении сторон. Он не адаптируется к размеру родительского элемента, и содержимое выходит за его пределы, если это необходимо.

Изначальный размер содержимого сохраняется.
Подгонки размеров содержимого под родительский элемент не производится.

`scale-down`

1img {
2  object-fit: scale-down;
3}

scale-down — это значение, которое объединяет поведение none и contain. Если содержимое умещается в родительском элементе, оно ведет себя как none, но если содержимое слишком велико, применяется поведение contain, и оно уменьшается, чтобы поместиться.

Содержимое масштабируется, если оно больше родительского элемента.
Отображается в исходном размере, если оно меньше.

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

Подгонка фоновых изображений под родительский элемент

Например, чтобы растянуть изображение на весь экран с учетом адаптивного дизайна, часто используется cover. Следующий код — пример подгонки изображения плотно под родительский элемент, даже если оно обрезается.

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

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

Отображение изображений с сохранением соотношения сторон

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

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

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

Распространенные ошибки

Распространенная ошибка при использовании object-fit — это отсутствие размера у родительского элемента. object-fit — это свойство для подгонки содержимого к родительскому элементу, поэтому если размер родительского элемента не определен, невозможно достичь ожидаемого эффекта. Убедитесь, что у родительского элемента задана ширина (width) или высота (height).

Например, в следующем коде высота родительского элемента не указана, поэтому object-fit не работает, как задумано.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

В этом случае необходимо указать высоту родительского элемента или настроить весь макет с помощью flexbox или grid layout.

Ситуации, в которых следует использовать `object-fit`

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

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

Использование object-fit в таких ситуациях может сохранить согласованность дизайна и улучшить впечатление пользователей.

Резюме

object-fit — это мощное CSS-свойство, которое позволяет гибко управлять отображением изображений и видео относительно их родительских элементов на веб-странице. Используя различные значения, такие как fill, contain, cover, none и scale-down, можно удовлетворять разные требования дизайна. Понимая, как правильно использовать это свойство и применяя его по назначению, можно создавать визуально привлекательные макеты.

Овладейте использованием object-fit, чтобы создавать адаптивные и эстетически привлекательные дизайны.

Свойство `object-position`

CSS-свойство object-position используется для управления размещением контента, такого как изображения и видео, внутри элемента. С помощью object-position можно размещать контент в определенных местах и создавать визуальные эффекты, соответствующие макету.

Обзор `object-position`

object-position в основном применяется к медиаэлементам, таким как теги <img> и <video>. Это свойство управляет размещением медиа в контейнере. object-fit часто используется в сочетании с object-position: первое задает, как изображение или видео вписывается в размер рамки, а второе регулирует положение содержимого на экране.

1img {
2    object-fit: cover;
3    object-position: center;
4}

В этом примере изображение масштабируется, чтобы вписаться в контейнер (object-fit: cover), и позиционируется так, чтобы был виден его центр (object-position: center).

Как задавать значения

object-position задается двумя значениями следующим образом.

Горизонтальное положение (ось X)
Вертикальное положение (ось Y)

Формат задания значений

В object-position можно задавать значения в следующем формате.

Ключевые слова: top, right, bottom, left, center
Проценты: от 0% до 100%
Единицы измерения длины: px, em, rem и т.д.

Например, вы можете использовать это следующим образом.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}

Сочетание ключевых слов и процентов

Также можно сочетать ключевые слова и проценты.

1img {
2    object-position: right 50%;
3}

В этом примере изображение размещено у правого края и вертикально центрировано на 50%. Такое сочетание очень полезно, когда требуется гибкое позиционирование.

Сочетание с `object-fit`

object-position часто используется вместе с object-fit. object-fit определяет, как изображение или видео масштабируется относительно его рамки. Например, использование object-fit: cover обрезает изображение, чтобы оно поместилось в рамку, и позиционирует его в соответствии с указанным object-position.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}

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

Примеры сочетания с значениями `object-fit`

fill: Изображение может быть искажено, но оно занимает весь контейнер.
contain: Все изображение отображается с сохранением пропорций.
cover: Обрезается, чтобы поместиться в контейнер, с сохранением пропорций.
none: Изображение отображается в исходном размере.

1img {
2    object-fit: contain;
3    object-position: top;
4}

В этом случае изображение размещено в верхней части контейнера, и отображается полностью.

Расширенное использование

object-position может быть применен в различных сценариях не только для простых настроек позиционирования, но и для улучшения визуальных эффектов.

Акцент на определенной части изображения

Это полезно, когда вы хотите сосредоточиться на определенной части изображения, а не отображать его целиком. Установите object-fit на cover и используйте object-position, чтобы сфокусироваться на определенной области.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}

В этом примере отображается нижняя левая часть изображения, акцентируя внимание на важных элементах.

При использовании видео в качестве фона

object-position также полезен при использовании видео в качестве фона. Вы можете разместить видео в определенном месте, чтобы сохранить согласованность с общим дизайном страницы.

1video {
2    object-fit: cover;
3    object-position: center top;
4}

В этом случае видео заполняет всю страницу и размещается в верхнем центре.

Распространенные проблемы и их решения

Могут возникнуть некоторые проблемы при использовании object-position. Здесь мы представляем распространенные проблемы и их решения.

Частично изображение обрезается

При использовании object-fit: cover изображение может быть обрезано для соответствия контейнеру. В этом случае, настроив положение отображения с помощью object-position, вы можете убедиться, что важные части отображены.

1img {
2    object-fit: cover;
3    object-position: center;
4}

Положение изображения не соответствует ожидаемому

Указания в процентах могут быть не всегда интуитивно понятны. Необходимо учитывать размер и соотношение сторон контейнера и экспериментировать с разными значениями. Использование инструментов разработчика для настройки в реальном времени эффективно.

Резюме

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

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

`overflow` и `contain` свойства

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

YouTube Video

HTML для предварительного просмотра

Связано с подгонкой объекта

Свойство object-fit

Значения свойства object-fit

fill (Значение по умолчанию)

contain

cover

none

scale-down

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

Подгонка фоновых изображений под родительский элемент

Отображение изображений с сохранением соотношения сторон

Распространенные ошибки

Ситуации, в которых следует использовать object-fit

Резюме

Свойство object-position

Обзор object-position

Как задавать значения

Формат задания значений

Сочетание ключевых слов и процентов

Сочетание с object-fit

Примеры сочетания с значениями object-fit

Расширенное использование

Акцент на определенной части изображения

При использовании видео в качестве фона

Распространенные проблемы и их решения

Частично изображение обрезается

Положение изображения не соответствует ожидаемому

Резюме

YouTube Video

Свойство `object-fit`

Значения свойства `object-fit`

`fill` (Значение по умолчанию)

`contain`

`cover`

`none`

`scale-down`

Ситуации, в которых следует использовать `object-fit`

Свойство `object-position`

Обзор `object-position`

Сочетание с `object-fit`

Примеры сочетания с значениями `object-fit`