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 会调整内容大小以使其完全适应父元素，同时保持纵横比。内容不会超出父元素的大小，但可能在垂直或水平方向上留下填充。

  • 整个内容都会显示出来。
  • 为保持原始纵横比，可能会出现填充（如信箱效果或柱箱效果）。
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 布局调整整体布局。

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-fit 设置图像或视频如何适配框架大小，object-position 调整内容的显示位置。

如何指定值

object-position 可以通过指定一个、两个或四个值来设置位置。但在旧版浏览器中，指定四个值可能不被支持。

指定一个值

如果只指定一个值，则该值被视为水平（X轴）位置，垂直（Y轴）位置会自动设置为 center。

  • 当指定为 object-position: left; 时，对象会被放置在左侧。
  • 当指定为 object-position: 70%; 时，对象会水平定位到70%，垂直方向居中。
  • 当指定为 object-position: 50px; 时，对象距离左侧50px，垂直方向居中。

指定两个值

指定两个值可以分别设置水平（X轴）和垂直（Y轴）的位置。

  • 当指定为 object-position: center center; 时，对象会被居中显示。
  • 当指定为 object-position: right top; 时，对象会被放置在右上角。
  • 当指定为 object-position: 75% 20%; 时，对象水平定位为75%，垂直定位为20%。
  • 当指定为 object-position: 50px 25px; 时，对象距离左侧50px，距离顶部25px。

指定四个值

通过指定四个值，可以结合 left、top 等关键字与其偏移量来实现更精细的位置控制。

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • 当指定为 object-position: left 10px top 20px; 时，对象距离左侧10px，距离顶部20px。
  • 当指定为 object-position: right 15% bottom 30px; 时，对象距离右侧15%，距离底部30px。
值的指定格式

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 结合使用，可以实现适应设计的灵活布局。掌握关键字、百分比和长度单位，在不同情况下最大化视觉效果。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

`overflow` 和 `contain` 属性与透明度相关的CSS属性