CSS object-position là thuộc tính giúp bạn tùy chỉnh vị trí hiển thị của hình ảnh hoặc video bên trong khung chứa khi sử dụng thuộc tính object-fit. object-position rất hữu ích khi nội dung không hoàn toàn khớp với khung chứa, cho phép bạn quyết định phần nào của hình ảnh hoặc video sẽ được ưu tiên hiển thị.

Bài viết này là một phần của chuỗi học CSS trên "codetuthub.com", cùng với các bài viết như CSS object-fit, CSS Background Position, và CSS Flexbox.

1. Tổng quan về object-position

Thuộc tính object-position điều khiển vị trí của hình ảnh hoặc video bên trong khung chứa, đặc biệt khi nội dung bị cắt do không khớp hoàn toàn với kích thước của khung. object-position thường được sử dụng cùng với object-fit, đặc biệt là các giá trị như cover và contain.

Cú pháp

css
object-position: x y;
  • x: Vị trí ngang (chiều từ trái sang phải) của nội dung bên trong khung, có thể là giá trị phần trăm, px, hoặc các giá trị từ khóa như left, center, hoặc right.
  • y: Vị trí dọc (chiều từ trên xuống dưới) của nội dung bên trong khung, có thể là giá trị phần trăm, px, hoặc các từ khóa như top, center, hoặc bottom.

Ví dụ

css
.image-container {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

Trong ví dụ này, hình ảnh sẽ được căn giữa trong khung 300x200px, và bất kỳ phần nào vượt ra ngoài khung sẽ bị cắt.

2. Các giá trị của object-position

2.1 center (Giá trị mặc định)

center là giá trị mặc định, đặt nội dung ở giữa theo cả trục X và Y, tạo sự cân bằng về hiển thị.

css
.center-image {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

Trong ví dụ này, hình ảnh sẽ hiển thị ở giữa khung và bất kỳ phần thừa nào sẽ bị cắt đều ở cả bốn phía.

2.2 top, right, bottom, left

Sử dụng top, right, bottom, và left giúp bạn căn chỉnh nội dung về một phía của khung chứa, như ở phía trên, bên phải, phía dưới, hoặc bên trái của khung.

css
.top-left-image {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: top left;
}

Trong ví dụ này, phần trên bên trái của hình ảnh sẽ được ưu tiên hiển thị trong khung.

2.3 Phần trăm (%)

Bạn có thể sử dụng giá trị phần trăm để điều chỉnh cụ thể vị trí của nội dung bên trong khung, giúp căn chỉnh chi tiết hơn. Ví dụ, 50% 30% sẽ di chuyển hình ảnh vào giữa theo chiều ngang và di chuyển về phía trên theo chiều dọc.

css
.custom-position {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: 50% 30%;
}

Ở đây, hình ảnh được căn giữa theo trục X nhưng chỉ hiển thị 30% chiều cao của nội dung từ trên xuống, giúp bạn kiểm soát chính xác vị trí hiển thị.

3. Ứng dụng của object-position trong thiết kế

3.1 Căn chỉnh ảnh bìa bài viết

Khi sử dụng ảnh bìa, bạn có thể muốn hiển thị khu vực chính của ảnh, như khuôn mặt hoặc tiêu điểm của ảnh. object-position cho phép bạn điều chỉnh để phần quan trọng của hình ảnh luôn hiển thị đúng vị trí.

css
.article-cover {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top;
}

Với object-position: top, ảnh sẽ ưu tiên hiển thị phần trên cùng, giúp giữ nguyên tiêu điểm quan trọng của hình ảnh.

3.2 Căn chỉnh ảnh đại diện người dùng

Với các ảnh đại diện, object-position cho phép bạn điều chỉnh ảnh để luôn hiển thị khuôn mặt, ngay cả khi kích thước ảnh không hoàn toàn khớp với khung tròn.

css
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

Trong ví dụ này, ảnh đại diện sẽ ưu tiên hiển thị phần trên của hình ảnh, đảm bảo khuôn mặt luôn ở trung tâm của khung tròn.

3.3 Hiển thị ảnh sản phẩm thương mại điện tử

Đối với các ảnh sản phẩm, việc điều chỉnh ảnh để hiển thị rõ các chi tiết quan trọng là điều cần thiết, giúp người dùng có cái nhìn chi tiết hơn về sản phẩm.

css
.product-image {
    width: 150px;
    height: 150px;
    object-fit: contain;
    object-position: center;
}

Sử dụng object-position: center, hình ảnh sản phẩm sẽ luôn hiển thị trung tâm của sản phẩm mà không làm thay đổi tỷ lệ, giúp khách hàng dễ dàng quan sát các chi tiết.

4. Kết hợp object-fit và object-position để tối ưu hiển thị

object-fit và object-position thường đi đôi với nhau để tạo ra các hiệu ứng hình ảnh mượt mà và linh hoạt, cho phép bạn kiểm soát cả tỷ lệ và vị trí của nội dung trong khung.

Ví dụ kết hợp cover và bottom

css
.banner-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: bottom;
}

Trong ví dụ này:

  • object-fit: cover giúp hình ảnh lấp đầy khung chứa.
  • object-position: bottom căn chỉnh hình ảnh để phần dưới cùng được ưu tiên hiển thị trong khung 400px, rất hữu ích khi bạn muốn giữ tiêu điểm ở phần dưới của ảnh.

5. Kết luận

object-position là một công cụ hữu ích giúp bạn điều chỉnh vị trí hiển thị của hình ảnh và video một cách chi tiết, đặc biệt khi kết hợp với object-fit. Với object-position, bạn có thể tạo nên những thiết kế linh hoạt, đảm bảo hình ảnh hiển thị đúng tiêu điểm và thẩm mỹ trên trang web. Để khám phá thêm về cách làm việc với hình ảnh trong CSS, hãy tham khảo thêm các bài học trên "codetuthub.com" như CSS object-fit, CSS Background Position, và CSS Flexbox.