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 của <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 của <img> hoặc <video> để phù hợp với vùng chứa của nó.
Thuộc tính này cho biết nội dung cần lấp đầy vùng chứa theo nhiều cách khác nhau; chẳng hạn như "giữ nguyên tỷ lệ khung hình đó" hoặc "mở rộng và chiếm nhiều dung lượng 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 định kiểu hình ảnh ở trên bằng một nửa chiều rộng (200 pixel) và cùng chiều cao (300 pixel), nó sẽ trông như thế này:
Thí dụ
img {
width: 200px;
height:
300px;
}
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à nơi thuộc object-fittính đi vào. object-fitThuộc tính 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 đã cho. Nếu cần, hình ảnh sẽ được kéo căng hoặc thu nhỏ để vừacontain- Hình ảnh vẫn giữ nguyên tỷ lệ co nhưng được thay đổi kích thước để vừa với kích thước đã chocover- Hình ảnh giữ nguyên tỷ lệ co và lấp đầy kích thước đã cho. Hình ảnh sẽ được cắt bớt để vừanone- Hình ảnh không bị thay đổi kích thướcscale-down- hình ảnh được thu nhỏ xuống phiên bản nhỏ nhất củanonehoặccontain
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ệ co và lấp đầy kích thước đã cho. Hình ảnh sẽ được cắt bớt để vừa với:
Thí dụ
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Sử dụng object-fit: chứa;
Nếu chúng tôi sử dụng object-fit: contain;, hình ảnh vẫn giữ nguyên tỷ lệ co nhưng được thay đổi kích thước để vừa với kích thước đã cho:
Thí dụ
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Sử dụng object-fit: lấp đầy;
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:
Thí dụ
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Sử dụng object-fit: none;
Nếu chúng tôi sử dụng object-fit: none;hình ảnh không được thay đổi kích thước:
Thí dụ
img {
width: 200px;
height:
300px;
object-fit: none;
}
Sử dụng object-fit: scale-down;
Nếu chúng tôi sử dụng object-fit: scale-down;, hình ảnh được thu nhỏ xuống phiên bản nhỏ nhất của nonehoặc
contain:
Thí dụ
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
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 50% chiều rộng 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ị phá hủy:
Thí dụ
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:
Thí dụ
CSS object-fit Thêm Ví dụ
Ví dụ sau minh họa tất cả các giá trị có thể có của thuộc object-fittính trong một ví dụ:
Thí dụ
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Đối tượng CSS- * Thuộc tính
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" |