CSS Thuộc tính phù hợp với đối tượng
Thuộc tính CSS object-fit
được sử dụng để chỉ định cách thay đổi kích thước <img> hoặc <video> để phù hợp với vùng chứa của nó.
Thuộc tính phù hợp với đối tượng CSS
Thuộc tính CSS object-fit
được sử dụng để chỉ định cách thay đổi kích thước <img> hoặc <video> để phù hợp với vùng chứa của nó.
Thuộc tính này yêu cầu nội dung lấp đầy vùng chứa theo nhiều cách khác nhau; chẳng hạn như "duy trì tỷ lệ khung hình đó" hoặc "kéo dài và chiếm nhiều không gian nhất có thể".
Nhìn vào hình ảnh sau đây từ Paris. Hình ảnh này rộng 400 pixel và cao 300 pixel:
Tuy nhiên, nếu chúng ta tạo kiểu cho hình ảnh ở trên có chiều rộng bằng một nửa (200 pixel) và cùng chiều cao (300 pixel), nó sẽ trông như thế này:
Chúng tôi thấy rằng hình ảnh đang được thu nhỏ để vừa với vùng chứa 200x300 pixel (tỷ lệ khung hình ban đầu của nó bị phá hủy).
Đây là lúc thuộc tính object-fit
xuất hiện. Thuộc tính object-fit
có thể nhận một trong các giá trị sau:
-
fill
- Đây là mặc định. Hình ảnh được thay đổi kích thước để lấp đầy kích thước nhất định. Nếu cần, hình ảnh sẽ được kéo dài hoặc thu gọn cho vừa -
contain
- Hình ảnh giữ nguyên tỷ lệ khung hình nhưng được thay đổi kích thước để vừa với kích thước nhất định -
cover
- Hình ảnh giữ nguyên tỷ lệ khung hình và lấp đầy kích thước nhất định. Hình ảnh sẽ được cắt bớt cho phù hợp -
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ấtnone
hoặccontain
Sử dụng object-fit: cover;
Nếu chúng ta sử dụng object-fit: cover;
hình ảnh giữ nguyên tỷ lệ khung hình và lấp đầy kích thước nhất định. Hình ảnh sẽ được cắt bớt để phù hợp:
Sử dụng object-fit: contains;
Nếu chúng ta sử dụng object-fit: contain;
hình ảnh giữ nguyên tỷ lệ khung hình nhưng được thay đổi kích thước để phù hợp với kích thước nhất định:
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 nhất định. Nếu cần, hình ảnh sẽ được kéo giãn hoặc nén cho vừa:
Sử dụng object-fit: none;
Nếu chúng ta sử dụng object-fit: none;
hình ảnh không được thay đổi kích thước:
Sử dụng object-fit: thu nhỏ;
Nếu chúng ta sử dụng object-fit: scale-down;
hình ảnh được thu nhỏ lại thành phiên bản nhỏ nhất của none
hoặc contain
:
Một vi dụ khac
Ở đây chúng tôi có hai hình ảnh và chúng tôi muốn chúng lấp đầy chiều rộng 50% của cửa sổ trình duyệt và 100% chiều cao.
Trong ví dụ sau, chúng tôi KHÔNG sử dụng object-fit
, vì vậy khi chúng tôi thay đổi kích thước cửa sổ trình duyệt, tỷ lệ khung hình của hình ảnh sẽ bị hủy:
Trong ví dụ tiếp theo, chúng tôi sử dụng object-fit: cover;
, vì vậy khi chúng tôi thay đổi kích thước cửa sổ trình duyệt, tỷ lệ khung hình của hình ảnh được giữ nguyên:
Phù hợp với đối tượng CSS Thêm ví dụ
Ví dụ sau đây minh họa tất cả các giá trị có thể có của thuộc tính object-fit
trong một ví dụ:
Ví dụ
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Hãy tự mình thử »Thuộc tính đối tượng CSS-*
Bảng sau liệt kê các thuộc tính CSS object-*:
Property | Description |
---|---|
object-fit | Specifies how an <img> or <video> should be resized to fit its container |
object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |