1. Thuộc tính object-fit trong CSS

Thuộc tính object-fit trong CSS được sử dụng để chỉ định cách thay đổi kích thước phần tử <img> hoặc <video> để phù hợp với vùng chứa của phần tử đó

Thuộc tính object-fit có thể nhận một trong các giá trị sau:

• fill – Hình ảnh được thay đổi kích thước để lấp đầy kích thước đã cho. Nếu cần, hình ảnh sẽ được kéo căng hoặc thu nhỏ để lấp đầy vùng chứa(mặc định)
• cotain – Hình ảnh giữ nguyên tỷ lệ, nhưng được thay đổi kích thước để vừa với kích thước đã cho
• cover – Hình ảnh giữ nguyên tỷ lệ và lấp đầy kích thước đã cho. Hình ảnh sẽ được cắt bớt để vừa
• none – Hình ảnh không được thay đổi kích thước
• scale-down – Hình ảnh được thu nhỏ xuống phiên bản nhỏ nhất none hoặc lớn nhất contain

2. Ví dụ về object-fit trong CSS

2.1 Sử dụng object-fit: fill;

Nếu chúng ta sử dụng object-fit: fill; hình ảnh được thay đổi kích thước để lấp đầy kích thước đã cho. Nếu cần, hình ảnh sẽ được kéo căng hoặc thu nhỏ để vừa với kích thước quy định

Ví dụ:

2.2 Sử dụng object-fit: cotain;

Nếu chúng ta sử dụng object-fit: contain; hình ảnh vẫn giữ nguyên tỷ lệ nhưng được thay đổi kích thước để vừa với kích thước đã cho

Ví dụ:

2.3 Sử dụng object-fit: cover;

Nếu chúng ta sử dụng object-fit: cover; hình ảnh sẽ giữ nguyên tỷ lệ và lấp đầy kích thước đã cho. Hình ảnh sẽ được cắt bớt để vừa với vùng chứa đã cho

Ví dụ:

2.4 Sử dụng object-fit: none;

Nếu chúng ta sử dụng object-fit: none; hình ảnh sẽ không thay đổi kích thước

Ví dụ:

2.5 Sử dụng object-fit: scale-down;

Ví dụ: