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; 時，對象會距離左側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，可達成適應設計的彈性佈局。掌握關鍵字、百分比和長度單位，最大化在各種情境中的視覺效果。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

`overflow` 和 `contain` 屬性與透明度相關的CSS屬性