Articles
Giới thiệu về CSS
Thuộc tính `object-fit` và `object-position`

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

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</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>

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: 500px; 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ỹ.

Thành thạo việc sử dụng object-fit để tạo ra các thiết kế đáp ứng và đẹp mắt.

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.

1img {
2    object-fit: cover;
3    object-position: center;
4}
  • Trong ví dụ này, hình ảnh được phóng to để vừa với vùng chứa (object-fit: cover), và được định vị để hiển thị ở phần trung tâm của hình ảnh (object-position: center).

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

object-position được chỉ định bằng hai giá trị như sau.

  • Vị trí ngang (trục X)
  • Vị trí dọc (trục Y)
Định dạng quy định giá trị

Trong thuộc tính object-position, bạn có thể quy định các giá trị theo định dạng sau.

  • Từ khóa: top, right, bottom, left, center
  • Phần trăm: 0% đến 100%
  • Đơn vị độ dài: px, em, rem, v.v.

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: bottom right;
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
  • 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ó.
1img {
2    object-fit: contain;
3    object-position: top;
4}

Trong thiết lập này, hình ảnh được đặt ở phía trên vùng chứa và toàn bộ hình ảnh đượ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`