CSS object-position property là gì và sử dụng như thế nào ?

CSS object-position property (tạm dịch: thuộc tính vị trí đối tượng CSS) là một trong những thuộc tính của CSS được sử dụng để chỉ định vị trí của nội dung bên trong các khối chứa. Nó thường được sử dụng cùng với thuộc tính object-fit để mô tả cách mà một phần tử như <video> hoặc <img> được định vị với tọa độ x/y bên trong khối chứa của nó. Trong bài viết này, chúng ta sẽ tìm hiểu tổng quan về thuộc tính CSS object-position và cách áp dụng nó vào thiết kế website.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS object-position property

Khi sử dụng thuộc tính object-fit, giá trị mặc định cho thuộc tính object-position là 50% 50%, vì vậy, mặc định, tất cả các hình ảnh sẽ được đặt ở trung tâm của khối chứa của nó. Chúng ta có thể thay đổi vị trí mặc định bằng cách sử dụng thuộc tính object-position.

Cú pháp

object-position: x-axis y-axis;

Trong đó, x-axis và y-axis là hai giá trị số (như 0 10px) trong đó giá trị đầu tiên quản lý trục x, trong khi giá trị thứ hai điều khiển trục y. Nó cũng có thể là một chuỗi (left, right hoặc center) hoặc có thể là số (trong % hoặc px). Nó cho phép giá trị âm và giá trị mặc định của nó là 50% 50%. Chúng ta có thể sử dụng các giá trị chuỗi như top right, bottom left, vv.

Giá trị

• initial: Nó thiết lập thuộc tính về giá trị mặc định
• inherit: Nó kế thừa thuộc tính từ phần tử cha của nó.

Ai sẽ dùng CSS object-position property?

CSS object-position property thường được sử dụng bởi các nhà thiết kế web để định vị hình ảnh hoặc video trong khối chứa của chúng. Việc sử dụng chỉ định vị trí một cách chính xác và chính xác sẽ giúp tăng khả năng tương thích của giao diện trang web trên các thiết bị khác nhau và giúp duy trì tỉ lệ khung hình nhất quán.

Hướng dẫn CSS object-position property

Để sử dụng thuộc tính CSS object-position, chúng ta cần đặt giá trị của nó trong phần tử HTML. Ví dụ:

<img src="image.jpg" style="object-fit: cover; object-position: center;">

Trong ví dụ này, hình ảnh được hiển thị bằng đầy đủ không gian khối chứa của nó (bằng cách sử dụng object-fit: cover) và được căn giữa với object-position: center.

Sử dụng CSS object-position property với thuộc tính object-fit

Thuộc tính object-fit được sử dụng để chỉ định cách hình ảnh hoặc video phải được điều chỉnh để khớp với kích thước khối chứa của nó. Khi được sử dụng cùng với thuộc tính object-position, ch úng ta có thể chỉ định cụ thể vị trí của phần tử trong khối chứa.

Ví dụ:

<img src="image.jpg" style="object-fit: cover; object-position: top right;">

Trong ví dụ này, hình ảnh sẽ được hiển thị bằng đầy đủ không gian khối chứa của nó (bằng cách sử dụng object-fit: cover) và được căn chỉnh đến góc trên bên phải với object-position: top right.

Ví dụ về CSS object-position property

• Để căn chỉnh hình ảnh ở giữa conteneur:

img {
  object-position: center;
}

Ví dụ này sẽ căn chỉnh hình ảnh ở giữa conteneur, theo cả chiều ngang và chiều dọc.

• Để căn chỉnh hình ảnh ở góc trên bên trái của conteneur:

img {
  object-position: 0 0;
}

Ví dụ này sẽ căn chỉnh hình ảnh ở góc trên bên trái của conteneur, theo cả chiều ngang và chiều dọc.

• Để căn chỉnh hình ảnh ở góc dưới bên phải của conteneur

img {
  object-position: 100% 100%;
}

Ví dụ này sẽ căn chỉnh hình ảnh ở góc dưới bên phải của conteneur, theo cả chiều ngang và chiều dọc.

• Để căn chỉnh hình ảnh ở một vị trí cụ thể trong conteneur:

img {
  object-position: 20px 30px;
}

Ví dụ này sẽ căn chỉnh hình ảnh ở vị trí (20px, 30px) trong conteneur.

• Để căn chỉnh hình ảnh ở một vị trí cụ thể trong conteneur, theo tỷ lệ phần trăm:

img {
  object-position: 50% 50%;
}

Ví dụ này sẽ căn chỉnh hình ảnh ở vị trí (50%, 50%) trong conteneur, theo tỷ lệ phần trăm.

Tùy thuộc vào nhu cầu của bạn, bạn có thể sử dụng thuộc tính CSS object-position để kiểm soát vị trí của hình ảnh trong một conteneur.

Dưới đây là một số ví dụ cụ thể hơn về cách sử dụng object-position:

• Để căn chỉnh hình ảnh ở giữa một thẻ div:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-position="center" />
</div>

Ví dụ này sẽ căn chỉnh hình ảnh ở giữa thẻ div, theo cả chiều ngang và chiều dọc.

• Để căn chỉnh hình ảnh ở góc trên bên trái của một thẻ div:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-position="0 0" />
</div>

Ví dụ này sẽ căn chỉnh hình ảnh ở góc trên bên trái của thẻ div, theo cả chiều ngang và chiều dọc.

• Để căn chỉnh hình ảnh ở góc dưới bên phải của một thẻ div:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-position="100% 100%" />
</div>

Ví dụ này sẽ căn chỉnh hình ảnh ở góc dưới bên phải của thẻ div, theo cả chiều ngang và chiều dọc.

• Để căn chỉnh hình ảnh ở một vị trí cụ thể trong một thẻ div:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-position="20px 30px" />
</div>

Ví dụ này sẽ căn chỉnh hình ảnh ở vị trí (20px, 30px) trong thẻ div.

• Để căn chỉnh hình ảnh ở một vị trí cụ thể trong một thẻ div, theo tỷ lệ phần trăm:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-position="50% 50%" />
</div>

Ví dụ này sẽ căn chỉnh hình ảnh ở vị trí (50%, 50%) trong thẻ div, theo tỷ lệ phần trăm.

Tất nhiên, bạn có thể kết hợp các giá trị và ký tự đặc biệt khác nhau để tạo ra các hiệu ứng object-position tùy chỉnh của riêng mình.

Ưu và Nhược điểm của CSS object-position property

Ưu điểm

• Cung cấp sự linh hoạt cho nhà thiết kế để chỉ định vị trí chính xác của phần tử bên trong khối chứa.
• Giúp tăng khả năng tương thích của giao diện trang web trên các thiết bị khác nhau.
• Tăng tính mỹ quan và tập trung vào nội dung chính của trang web.

Nhược điểm

• Không được hỗ trợ trong các phiên bản trình duyệt cũ.
• Việc sử dụng sai cách có thể dẫn đến một số vấn đề về bố cục và khả năng hiển thị trên các thiết bị khác nhau.

Lời khuyên về CSS object-position property

• Sử dụng một cách hợp lý và không quá sử dụng để tránh làm giảm hiệu suất của trang web.
• Kiểm tra tính tương thích trên các thiết bị khác nhau để đảm bảo hiển thị chính xác trên tất cả các thiết bị.
• Sử dụng kỹ thuật SEO cho hình ảnh để tăng tốc độ tải trang và cải thiện vị trí của trang web trong kết quả tìm kiếm.