Articles
Введение в CSS
Свойства `object-fit` и `object-position`

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

Эта статья объясняет свойства 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 : fill</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.container-fill img {
 27    width: 100%;
 28    height: 100%;
 29    object-fit: fill;
 30}
 31</pre>
 32                <header><h4>HTML</h4></header>
 33<pre>
 34&lt;div class=&quot;container-fill&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 35    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 36&lt;/div&gt;
 37</pre>
 38                <header><h4>HTML+CSS</h4></header>
 39                <section class="sample-view">
 40                    <div class="container-fill" style="width: 150px; height: 100px;">
 41                        <img src="example.jpg" alt="Example Image">
 42                    </div>
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : contain</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.container-contain img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: contain;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;container-contain&quot; style=&quot;width: 150px; height: 100px;&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="container-contain" style="width: 150px; height: 100px;">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : cover</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.container-cover img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: cover;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;container-cover&quot; style=&quot;width: 150px; height: 100px;&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="container-cover" style="width: 150px; height: 100px;">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit : none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102    width: 100%;
103    height: 100%;
104    object-fit: none;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108<pre>
109&lt;div class=&quot;container-none&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
110    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
111&lt;/div&gt;
112</pre>
113                <header><h4>HTML+CSS</h4></header>
114                <section class="sample-view">
115                    <div class="container-none" style="width: 150px; height: 100px;">
116                        <img src="example.jpg" alt="Example Image">
117                    </div>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>object-fit : scale-down</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127    width: 100%;
128    height: 100%;
129    object-fit: scale-down;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class=&quot;container-scale-down&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
135    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
136&lt;/div&gt;
137</pre>
138                <header><h4>HTML+CSS</h4></header>
139                <section class="sample-view">
140                    <div class="container-scale-down" style="width: 150px; height: 100px;">
141                        <img src="example.jpg" alt="Example Image">
142                    </div>
143                </section>
144            </section>
145        </article>
146        <article>
147            <h3>object-fit : Example(Cover)</h3>
148            <section>
149                <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152  width: 100%;
153  height: 100%;
154  object-fit: cover;
155}
156</pre>
157                <header><h4>HTML</h4></header>
158<pre>
159&lt;div class=&quot;container-example-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
160    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
161&lt;/div&gt;
162</pre>
163                <header><h4>HTML+CSS</h4></header>
164                <section class="sample-view">
165                    <div class="container-example-cover" style="width: 150px; height: 100px;">
166                        <img src="example.jpg" alt="Example Image">
167                    </div>
168                </section>
169            </section>
170        </article>
171        <article>
172            <h3>object-fit : Example(Contain)</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177  width: 100%;
178  height: 100%;
179  object-fit: contain;
180}
181</pre>
182                <header><h4>HTML</h4></header>
183<pre>
184&lt;div class=&quot;container-example-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
185    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
186&lt;/div&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <div class="container-example-contain" style="width: 150px; height: 100px;">
191                        <img src="example.jpg" alt="Example Image">
192                    </div>
193                </section>
194            </section>
195        </article>
196        <article>
197            <h3>object-fit Common Mistake Example</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202    width: 100px;
203    height: auto;
204    /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208    object-fit: cover;
209}
210</pre>
211                <header><h4>HTML</h4></header>
212<pre>
213&lt;div class=&quot;background-image-invalid&quot;&gt;
214    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
215&lt;/div&gt;
216</pre>
217                <header><h4>HTML+CSS</h4></header>
218                <section class="sample-view">
219                    <div class="container-invalid">
220                        <img src="example.jpg" alt="Example Image">
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>object-position : one value</h3>
227            <section>
228                <header><h4>object-position: center;</h4></header>
229                <section class="sample-view" style="width: 550px; height: 250px;">
230                    <img class="object-position-center" src="example.jpg" alt="Example Image">
231                </section>
232                <header><h4>object-position: left;</h4></header>
233                <section class="sample-view" style="width: 550px; height: 250px;">
234                    <img class="object-position-left" src="example.jpg" alt="Example Image">
235                </section>
236                <header><h4>object-position: 70%;</h4></header>
237                <section class="sample-view" style="width: 550px; height: 250px;">
238                    <img class="object-position-70" src="example.jpg" alt="Example Image">
239                </section>
240                <header><h4>object-position: 50px;</h4></header>
241                <section class="sample-view" style="width: 550px; height: 250px;">
242                    <img class="object-position-50px" src="example.jpg" alt="Example Image">
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>object-position : two values</h3>
248            <section>
249                <header><h4>object-position: center center</h4></header>
250                <section class="sample-view" style="width: 550px; height: 250px;">
251                    <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252                </section>
253                <header><h4>object-position: right top</h4></header>
254                <section class="sample-view" style="width: 550px; height: 250px;">
255                    <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256                </section>
257                <header><h4>object-position: 75% 20%</h4></header>
258                <section class="sample-view" style="width: 550px; height: 250px;">
259                    <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260                </section>
261                <header><h4>object-position: 50px 25px</h4></header>
262                <section class="sample-view" style="width: 550px; height: 250px;">
263                    <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>object-position: four values</h3>
269            <section>
270                <header><h4>object-position: left 10px top 20px</h4></header>
271                <section class="sample-view" style="width: 550px; height: 250px;">
272                    <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273                </section>
274                <header><h4>object-position: right 15% bottom 30px</h4></header>
275                <section class="sample-view" style="width: 550px; height: 250px;">
276                    <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277                </section>
278            </section>
279        </article>
280        <article>
281            <h3>object-position: mixed values</h3>
282            <section>
283                <header><h4>object-position: right 50%</h4></header>
284                <section class="sample-view" style="width: 550px; height: 250px;">
285                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286                </section>
287            </section>
288        </article>
289        <article>
290            <h3>object-position and object-fit</h3>
291            <section>
292                <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293                <section class="sample-view" style="width: 550px; height: 250px;">
294                    <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295                </section>
296                <header><h4>object-fit: contain; object-position: right;</h4></header>
297                <section class="sample-view" style="width: 550px; height: 250px;">
298                    <img class="object-position-right" src="example.jpg" alt="Example Image">
299                </section>
300            </section>
301        </article>
302    </main>
303</body>
304</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: 150px; 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-position

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

Обзор object-position

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

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

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

Указание одного значения

Если указано только одно значение, оно интерпретируется как горизонтальное положение (ось X), а вертикальное (ось Y) автоматически устанавливается на center.

  • Если указано object-position: left;, объект размещается слева.
  • Если указано object-position: 70%;, объект размещается на 70% по горизонтали и по центру по вертикали.
  • Если указано object-position: 50px;, объект размещается на 50 пикселей слева и по центру по вертикали.

Указание двух значений

Указание двух значений позволяет задать положение по горизонтали (ось X) и вертикали (ось Y) отдельно.

  • Если указано object-position: center center;, объект размещается по центру.
  • Если указано object-position: right top;, объект размещается вверху справа.
  • Если указано object-position: 75% 20%;, объект размещается на 75% по горизонтали и 20% по вертикали.
  • Если указано object-position: 50px 25px;, объект размещается на 50 пикселей слева и 25 пикселей сверху.

Указание четырёх значений

Указывая четыре значения, вы можете задать более точное позиционирование, используя ключевые слова, такие как left или top, вместе со смещениями.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Если указано object-position: left 10px top 20px;, объект размещается на 10 пикселей слева и 20 пикселей сверху.
  • Если указано object-position: right 15% bottom 30px;, объект размещается на 15% справа и 30 пикселей снизу.
Формат задания значений

object-position может принимать следующие форматы значений.

  • Вы можете указать такие ключевые слова, как top, right, bottom, left и center.
  • Вы также можете указывать значения в процентах, например, 50%, или в единицах, таких как px.

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

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: right bottom;
4}
  • В этом примере изображение растянуто на весь контейнер, отображая нижнюю правую часть содержимого.
Примеры сочетания с значениями object-fit

Вы можете указать следующие значения для object-fit.

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

Например, использование object-fit: contain отображает всё изображение и размещает его согласно настройке object-position.

1img {
2    object-fit: contain;
3    object-position: right;
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` свойстваСвойства CSS, связанные с прозрачностью