Bạn có thể sẽ gặp phải trường hợp mà bạn muốn giữ nguyên tỷ lệ khung hình ban đầu và nếu giữ nguyên tỷ lệ khung hình thì hình ảnh bị méo do bị kéo giãn theo khung. Một giải pháp phổ biến cho vấn đề này là sử dụng thuộc tính CSS background-image.

Trong bài viết này, chúng ta sẽ tìm hiểu các thuộc tính của object-fit như fill, cover, contain, none và scale-down. Ngoài ra chúng ta sẽ lượn 1 vòng thằng object-position trong image.

1. Ví dụ 1 ảnh đơn giản

<img
  src="https://s3.cloudfly.vn/cunghocwebhome/wp-content/uploads/2021/08/example-object-fit-min.jpg"
  width="600"
  height="337"
  style="width: 600px; height: 337px;"
  alt="Chia tỷ lệ và cắt ảnh bằng CSS"
/>

Với đoạn html trên, chúng ta đã thu nó lại với tỷ lệ ngang 600px và dọc 337px như kết quả sau:

<img
  src="https://s3.cloudfly.vn/cunghocwebhome/wp-content/uploads/2021/08/example-object-fit-min.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px;"
  alt="Chia tỷ lệ và cắt ảnh bằng CSS"
/>

Còn ta cho nó tỷ lệ ngang 300px mà dọc vẫn giữ nguyên thì ta có kết quả sau:

Đấy, nhìn rất méo mó và không đẹp, chính vì thế mà bạn nên tìm hiểu tiếp tục khi bạn đọc đến đây.

2. Sử dụng object-fit

2.1. Thuộc tính object-fit: cover

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover;"
  ...
/>

Kết quả là ảnh sẽ lấp đầy theo chiều dọc, 2 bên trái phải sẽ được ẩn đi.

2.2. Thuộc tính object-fit: contain

<img
  ...
  style="width: 300px; height: 337px; object-fit: contain;"
  ...
/>

Kết quả là ảnh sẽ được lấp đầy theo chiều ngang, ảnh sẽ bị hụt 2 phía trên và dưới.

2.3. Thuộc tính object-fit: none

<img
  ...
  style="width: 300px; height: 337px; object-fit: none;"
  ...
/>

Kết quả là ảnh sẽ giữ nguyên size của nó, khung ảnh chỉ như là 1 cái cửa sổ để hiển thị nó.

3. Sử dụng object-fit và object-position

Chúng ta thường sẽ kết hợp 2 em nó lại:

• object-fit được hiểu như là cách để ảnh hiển thị mà vẫn giữ được kích thước ảnh bên trong khung.
• object-position được hiểu là vị trí của ảnh được hiển thị.

Ví dụ

Ta có:

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  ...
/>

Giải thích:

• object-fit: cover làm cho ảnh trong khung vừa phía trên và dưới và nếu chỉ dùng thuộc tính này thì mặc định nó sẽ hiển thị vị trí là center.
• object-position: left top vị trí ảnh hiển thị được chỉ định như đoạn html ví dụ là left = 100% và top = 0, nghĩa là nó sẽ hiển thị toàn bộ qua phải và nằm phía trên.

Kết quả:

4. Chốt

Trong bài viết này, bạn đã khám phá các giá trị cho các thuộc tính CSS object-fit và object-position.

Trước khi sử dụng object-fit trong dự án của bạn, hãy chắc chắn rằng nó được hỗ trợ trong các trình duyệt của bạn, nhưng hiện tại trình duyệt nào cũng hổ trợ cả, vì vậy cứ chơi đi…