Thuộc tính CSS object-fit
- Trang trước CSS样式 hình ảnh
- Trang tiếp theo CSS object-position
CSS object-fit Thuộc tính này được sử dụng để quy định cách điều chỉnh kích thước của <img> hoặc <video> để phù hợp với khung của chúng.
Hỗ trợ trình duyệt
Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.
| Thuộc tính | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Thuộc tính CSS object-fit
CSS object-fit Thuộc tính này được sử dụng để chỉ định cách điều chỉnh kích thước của <img> hoặc <video> để phù hợp với khung của chúng.
Thuộc tính này cho biết cách nội dung được lấp đầy vào khung. Ví dụ như “duy trì tỷ lệ ngang dọc” hoặc “mở rộng và chiếm nhiều không gian nhất có thể”.
Xin xem hình ảnh tulip từ Shanghai Flower Port dưới đây, nó có kích thước 300x300 pixel:
Nhưng, nếu chúng ta đặt hình ảnh trên lên 200x300 pixel, nó sẽ trông như sau:
Ví dụ
img {
width: 200px;
height: 300px;
}
Chúng ta thấy hình ảnh bị nén để phù hợp với hộp 200x300 pixel và tỷ lệ ban đầu bị phá hủy.
Nếu chúng ta sử dụng object-fit: cover;Nó sẽ cắt cạnh hình ảnh, duy trì tỷ lệ ngang dọc và lấp đầy không gian như sau:
Ví dụ
img {
width: 200px;
height: 400px;
object-fit: cover;
}
Một ví dụ khác
Ở đây, chúng ta có hai hình ảnh, chúng ta muốn chúng lấp đầy 50% độ rộng và 100% độ cao của cửa sổ trình duyệt.
Trong ví dụ sau, chúng ta không sử dụng object-fitdo đó, khi chúng ta điều chỉnh kích thước cửa sổ trình duyệt, tỷ lệ ngang dọc của hình ảnh sẽ bị phá hủy:
Ví dụ
Trong ví dụ tiếp theo, chúng ta sử dụng object-fit: cover;do đó, khi chúng ta điều chỉnh kích thước cửa sổ trình duyệt, tỷ lệ ngang dọc của hình ảnh sẽ được duy trì:
Ví dụ
Tất cả các giá trị của thuộc tính CSS object-fit
object-fit Thuộc tính này có thể chấp nhận các giá trị sau:
fill- Giá trị mặc định. Thay đổi kích thước nội dung thay thế để lấp đầy khung nội dung của phần tử. Nếu cần, kéo giãn hoặc nén vật thể để phù hợp với đối tượng này.contain- Phóng to nội dung thay thế để duy trì tỷ lệ ngang dọc, đồng thời đặt nó vào khung nội dung của phần tử.cover- Thay đổi kích thước nội dung thay thế để duy trì tỷ lệ ngang dọc khi lấp đầy toàn bộ khung nội dung của phần tử. Đối tượng sẽ bị cắt để phù hợp.none- Không điều chỉnh kích thước nội dung thay thế.scale-down- Điều chỉnh kích thước nội dung như không có nội dung hoặc nội dung bao gồm (sẽ dẫn đến kích thước cụ thể của đối tượng nhỏ hơn)
Dưới đây là ví dụ minh họa: object-fit Tất cả các giá trị có thể của thuộc tính:
Ví dụ
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- Trang trước CSS样式 hình ảnh
- Trang tiếp theo CSS object-position
