Thuộc tính `object-fit` và `object-position`

Articles

Bài viết này giải thích các thuộc tính object-fit và object-position.

Bạn có thể học cách sắp xếp các đối tượng như hình ảnh và video cũng như cách áp dụng chúng trong CSS.

YouTube Video

HTML để Xem trước

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>

Liên quan đến việc phù hợp đối tượng

Thuộc tính `object-fit`

Thuộc tính object-fit trong CSS chủ yếu được sử dụng để kiểm soát cách hình ảnh, video và nội dung khác vừa vặn trong các phần tử chứa của chúng. Bằng cách sử dụng thuộc tính này, bạn có thể linh hoạt điều chỉnh kích thước và vị trí thẩm mỹ của các phần tử được chỉ định. Nó rất hữu ích trong việc điều chỉnh hiển thị hình ảnh hoặc video bằng cách cắt xén hoặc thay đổi kích thước khi chúng không vừa với phần tử cha.

Các giá trị của `object-fit`

`fill` (Giá trị mặc định)

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

fill là giá trị mặc định, trong đó hình ảnh hoặc video sẽ bị kéo dãn để hoàn toàn vừa với chiều rộng và chiều cao của phần tử cha. Trong trường hợp này, tỷ lệ khung hình gốc sẽ bị bỏ qua, điều này có thể gây ra sự méo hình ảnh.

Hoàn toàn vừa với kích thước của phần tử cha.
Do tỷ lệ khung hình bị bỏ qua, hình ảnh hoặc video có thể bị kéo dãn theo chiều dọc hoặc chiều ngang.

`contain`

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

contain thay đổi kích thước nội dung để nó vừa hoàn toàn trong phần tử cha đồng thời giữ nguyên tỷ lệ khung hình. Nó không vượt quá kích thước của phần tử cha, và có thể có khoảng trống ở phía dọc hoặc ngang.

Toàn bộ nội dung được hiển thị.
Để duy trì tỷ lệ khung hình gốc, khoảng trống (hiệu ứng hộp thư hoặc hộp cột) có thể xuất hiện.

`cover`

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

cover thay đổi kích thước nội dung để phủ hoàn toàn phần tử cha đồng thời giữ nguyên tỷ lệ khung hình. Một số nội dung có thể bị cắt xén để vừa với phần tử cha, nhưng toàn bộ phần tử sẽ lấp đầy khung chứa, và không có khoảng trống xuất hiện.

Nội dung bao phủ hoàn toàn phần tử cha.
Nó có thể bị cắt xén mà vẫn giữ tỉ lệ khung hình gốc.
Thường được sử dụng cho hình nền hoặc hình ảnh trong phần hero.

`none`

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

none hiển thị hình ảnh hoặc video với kích thước và tỉ lệ khung hình gốc của chúng. Nó không điều chỉnh để phù hợp với kích thước của phần tử cha, và nội dung sẽ tràn ra nếu cần thiết.

Kích thước gốc của nội dung được giữ nguyên.
Không thay đổi kích thước để làm cho nội dung phù hợp với phần tử cha.

`scale-down`

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

scale-down là một giá trị kết hợp hành vi của none và contain. Nếu nội dung phù hợp với phần tử cha, nó hoạt động như none, nhưng nếu nội dung quá lớn, nó sẽ áp dụng hành vi của contain và thu nhỏ lại để phù hợp.

Nội dung sẽ được thu nhỏ lại nếu nó lớn hơn phần tử cha.
Nó sẽ hiển thị với kích thước gốc nếu nó nhỏ hơn.

Ví dụ sử dụng

Điều chỉnh hình nền phù hợp với phần tử cha

Ví dụ, để trải rộng một hình ảnh trên toàn màn hình với thiết kế đáp ứng, người ta thường sử dụng cover. Mã sau đây là một ví dụ về việc điều chỉnh hình ảnh khít với phần tử cha, ngay cả khi nó bị cắt xén.

 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>

Trong trường hợp này, hình ảnh hoàn toàn bao phủ phần tử cha, duy trì một bố cục đẹp trên mọi kích thước màn hình. Nếu tỉ lệ khung hình khác nhau, một số phần của hình ảnh có thể không hiển thị, nhưng nó mang lại một cách trình bày phù hợp với thiết kế.

Hiển thị hình ảnh trong khi giữ tỉ lệ khung hình

Tiếp theo, nếu bạn muốn điều chỉnh toàn bộ hình ảnh vào phần tử cha trong khi vẫn giữ tỉ lệ khung hình của nó, contain là lựa chọn phù hợp.

 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>

Trong ví dụ này, hình ảnh được thu nhỏ để phù hợp với container, dẫn đến có một số khoảng cách, nhưng hình ảnh gốc được hiển thị mà không bị biến dạng.

Các lỗi thường gặp

Một lỗi thường gặp khi sử dụng object-fit là không đặt kích thước cho phần tử cha. object-fit là một thuộc tính để điều chỉnh nội dung phù hợp với phần tử cha, vì vậy nếu kích thước của phần tử cha không rõ ràng, hiệu ứng mong muốn sẽ không đạt được. Đảm bảo phần tử cha đã được đặt width hoặc height một cách phù hợp.

Ví dụ, trong mã sau đây, chiều cao của phần tử cha không được chỉ định, do đó object-fit không hoạt động như mong muốn.

 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>

Trong trường hợp này, bạn cần chỉ định chiều cao của phần tử cha hoặc điều chỉnh toàn bộ bố cục bằng cách sử dụng flexbox hoặc grid layout.

Các tình huống mà `object-fit` nên được sử dụng

object-fit rất quan trọng, đặc biệt trong thiết kế đáp ứng và các trang web phục vụ cho nhiều kích thước màn hình khác nhau. Ví dụ, nó hữu ích trong các trường hợp sau:.

Khi bạn muốn điều chỉnh hình ảnh hoặc video để hiển thị đúng trên các thiết bị khác nhau
Khi bạn muốn hiển thị hình ảnh nền hoặc nội dung tương tự trên toàn màn hình mà vẫn cho phép cắt tỉa
Khi bạn muốn làm cho hình ảnh vừa khớp với phần tử cha mà vẫn giữ được tỷ lệ khung hình
Khi bạn muốn hiển thị kích thước hình ảnh một cách nhất quán, chẳng hạn như trong bộ sưu tập

Sử dụng object-fit trong những tình huống này có thể duy trì tính nhất quán trong thiết kế và cải thiện trải nghiệm người dùng.

Tóm tắt

object-fit là một thuộc tính CSS mạnh mẽ cho phép bạn kiểm soát linh hoạt cách hình ảnh và video hiển thị so với phần tử cha của chúng trên một trang web. Bằng cách sử dụng các giá trị khác nhau như fill, contain, cover, none và scale-down, bạn có thể đáp ứng nhiều yêu cầu thiết kế khác nhau. Bằng cách hiểu rõ cách sử dụng và áp dụng đúng cách, bạn có thể đạt được những bố cục hấp dẫn về mặt thẩm mỹ.

Thuộc tính `object-position`

Thuộc tính object-position trong CSS được sử dụng để kiểm soát vị trí của các nội dung như hình ảnh và video bên trong một phần tử. Bằng cách sử dụng object-position, bạn có thể định vị nội dung tại các điểm cụ thể và cung cấp các hiệu ứng hình ảnh phù hợp với bố cục.

Tổng quan về `object-position`

object-position chủ yếu được áp dụng cho các phần tử media như thẻ <img> và <video>. Thuộc tính này kiểm soát nơi mà nội dung media được hiển thị trong vùng chứa của nó. object-fit thường được sử dụng kết hợp với object-position, trong đó object-fit thiết lập cách hình ảnh hoặc video phù hợp với kích thước khung, và object-position điều chỉnh vị trí hiển thị của nội dung.

Cách chỉ định giá trị

object-position có thể chỉ định vị trí sử dụng một, hai hoặc bốn giá trị. Tuy nhiên, việc chỉ định bốn giá trị có thể không được hỗ trợ bởi các trình duyệt cũ.

Chỉ định Một Giá trị

Nếu chỉ chỉ định một giá trị, nó sẽ được hiểu là vị trí ngang (trục X) và trục dọc (trục Y) sẽ tự động được đặt thành center.

Khi được chỉ định là object-position: left;, đối tượng sẽ được đặt về phía bên trái.
Khi được chỉ định là object-position: 70%;, đối tượng sẽ được đặt ở vị trí ngang 70% và căn giữa theo chiều dọc.
Khi được chỉ định là object-position: 50px;, đối tượng sẽ được đặt cách bên trái 50px và căn giữa theo chiều dọc.

Chỉ định Hai Giá trị

Việc chỉ định hai giá trị cho phép bạn thiết lập riêng biệt vị trí ngang (trục X) và vị trí dọc (trục Y).

Khi được chỉ định là object-position: center center;, đối tượng sẽ được căn giữa.
Khi được chỉ định là object-position: right top;, đối tượng sẽ được đặt ở góc trên bên phải.
Khi được chỉ định là object-position: 75% 20%;, đối tượng sẽ được đặt ở 75% theo chiều ngang và 20% theo chiều dọc.
Khi được chỉ định là object-position: 50px 25px;, đối tượng sẽ được đặt cách bên trái 50px và cách phía trên 25px.

Chỉ định Bốn Giá trị

Bằng cách chỉ định bốn giá trị, bạn có thể điều chỉnh vị trí chi tiết hơn bằng cách sử dụng các từ khóa như left hoặc top cùng với giá trị khoảng cách của chúng.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;

Khi được chỉ định là object-position: left 10px top 20px;, đối tượng sẽ được đặt cách bên trái 10px và cách phía trên 20px.
Khi được chỉ định là object-position: right 15% bottom 30px;, đối tượng sẽ được đặt cách bên phải 15% và cách phía dưới 30px.

Định dạng quy định giá trị

object-position có thể nhận các định dạng giá trị sau.

Bạn có thể chỉ định các từ khóa như top, right, bottom, left, và center.
Bạn cũng có thể chỉ định giá trị bằng phần trăm như 50% hoặc đơn vị như px.

Ví dụ, bạn có thể sử dụng nó như thế này.

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

Kết hợp Từ khóa và Phần trăm

Cũng có thể kết hợp từ khóa và phần trăm.

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

Trong ví dụ này, hình ảnh được đặt tại cạnh phải và căn giữa theo chiều dọc ở mức 50%. Sự kết hợp này rất hữu ích khi cần định vị linh hoạt.

Kết hợp với `object-fit`

object-position thường được sử dụng cùng với object-fit. object-fit xác định cách một hình ảnh hoặc video được thay đổi kích thước sao cho phù hợp với khung của nó. Ví dụ, sử dụng object-fit: cover cắt bớt hình ảnh để phù hợp với khung và định vị nó theo object-position được chỉ định.

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

Trong ví dụ này, hình ảnh trải rộng khắp vùng chứa và hiển thị phần nội dung ở góc dưới bên phải.

Ví dụ Kết hợp với Các giá trị `object-fit`

Bạn có thể chỉ định các giá trị sau cho object-fit.

fill: Hình ảnh có thể bị méo mó nhưng phù hợp với toàn bộ vùng chứa.
contain: Toàn bộ hình ảnh được hiển thị mà vẫn giữ được tỷ lệ khung hình.
cover: Cắt bớt để phù hợp với vùng chứa, trong khi vẫn duy trì tỷ lệ khung hình.
none: Hình ảnh được hiển thị với kích thước ban đầu của nó.

Ví dụ, sử dụng object-fit: contain sẽ hiển thị toàn bộ hình ảnh và đặt vị trí theo cài đặt của object-position.

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

Với cài đặt này, hình ảnh sẽ được đặt ở phía bên phải của khung chứa và toàn bộ hình ảnh sẽ được hiển thị.

Sử dụng Nâng cao

object-position có thể được áp dụng trong nhiều trường hợp, không chỉ để điều chỉnh vị trí đơn giản mà còn để nâng cao hiệu ứng hình ảnh.

Nhấn mạnh một phần của hình ảnh

Nó hữu ích khi bạn muốn tập trung vào một phần cụ thể của hình ảnh thay vì hiển thị toàn bộ hình ảnh. Đặt object-fit thành cover và sử dụng object-position để tập trung vào một khu vực cụ thể.

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

Trong ví dụ này, phần dưới bên trái của hình ảnh được hiển thị, nhấn mạnh các phần quan trọng.

Khi sử dụng video làm nền

object-position cũng rất hữu ích khi sử dụng video làm nền. Bạn có thể đặt vị trí video tại một vị trí cụ thể để duy trì sự nhất quán với thiết kế chung của trang.

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

Trong thiết lập này, video phù hợp toàn bộ trang và được đặt ở trung tâm trên cùng.

Các vấn đề phổ biến và giải pháp

Có thể xảy ra một số vấn đề khi sử dụng object-position. Ở đây, chúng tôi giới thiệu các vấn đề phổ biến và cách khắc phục.

Một phần của hình ảnh bị cắt mất

Khi sử dụng object-fit: cover, hình ảnh có thể bị cắt để phù hợp với khung chứa. Trong trường hợp này, bằng cách điều chỉnh vị trí hiển thị với object-position, bạn có thể đảm bảo các phần quan trọng được hiển thị.

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

Vị trí hình ảnh không như mong muốn

Các thông số phần trăm có thể không phải lúc nào cũng rõ ràng trực quan. Cần xem xét kích thước và tỷ lệ khung chứa và thử nghiệm với các giá trị khác nhau. Sử dụng công cụ của nhà phát triển để điều chỉnh theo thời gian thực là rất hiệu quả.

Tóm tắt

object-position là một công cụ mạnh mẽ để định vị tự do các phần tử truyền thông. Bằng cách kết hợp với object-fit, có thể đạt được bố cục linh hoạt phù hợp với thiết kế. Làm chủ các từ khóa, phần trăm và đơn vị độ dài để tối đa hóa hiệu ứng hình ảnh trong các tình huống khác nhau.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính `overflow` và `contain`Các thuộc tính CSS liên quan đến sự trong suốt

Thuộc tính `object-fit` và `object-position`

YouTube Video

HTML để Xem trước

Liên quan đến việc phù hợp đối tượng

Thuộc tính object-fit

Các giá trị của object-fit

fill (Giá trị mặc định)

contain

cover

none

scale-down

Ví dụ sử dụng

Điều chỉnh hình nền phù hợp với phần tử cha

Hiển thị hình ảnh trong khi giữ tỉ lệ khung hình

Các lỗi thường gặp

Các tình huống mà object-fit nên được sử dụng

Tóm tắt

Thuộc tính object-position

Tổng quan về object-position

Cách chỉ định giá trị

Chỉ định Một Giá trị

Chỉ định Hai Giá trị

Chỉ định Bốn Giá trị

Định dạng quy định giá trị

Kết hợp Từ khóa và Phần trăm

Kết hợp với object-fit

Ví dụ Kết hợp với Các giá trị object-fit

Sử dụng Nâng cao

Nhấn mạnh một phần của hình ảnh

Khi sử dụng video làm nền

Các vấn đề phổ biến và giải pháp

Một phần của hình ảnh bị cắt mất

Vị trí hình ảnh không như mong muốn

Tóm tắt

YouTube Video

Thuộc tính `object-fit`

Các giá trị của `object-fit`

`fill` (Giá trị mặc định)

`contain`

`cover`

`none`

`scale-down`

Các tình huống mà `object-fit` nên được sử dụng

Thuộc tính `object-position`

Tổng quan về `object-position`

Kết hợp với `object-fit`

Ví dụ Kết hợp với Các giá trị `object-fit`