CSS: img

.instui-img — Một <img> được tạo kiểu với các bộ chỉnh hiển thị, cắt và hiệu ứng có thể xếp chồng.

Các hiệu ứng kết hợp thông qua thuộc tính tùy chỉnh chung --pantoken-img-filter, vì vậy -with-grayscale và -with-blur có thể áp dụng cùng nhau; các bộ chỉnh cắt -constrain-* yêu cầu người dùng phải đặt kích thước hộp một cách rõ ràng.

Source: img.css

Khả năng truy cập

Cung cấp văn bản alt có ý nghĩa mô tả hình ảnh, và sử dụng alt="" rỗng cho các hình ảnh chỉ mang tính trang trí để công nghệ hỗ trợ bỏ qua chúng.

Sử dụng

@import "@pantoken/components/components.css";
@import "@pantoken/components/img.css";

Các ví dụ

<img class="instui-img" alt="Gradient">

Bộ sửa

Bộ sửa	Mô tả
.-constrain-contain	Phóng to/thu nhỏ để vừa trong hộp (contain).
.-constrain-cover	Phóng to để lấp đầy hộp (cover).
.-display-block	Hiển thị như một phần tử block.
.-with-blur	Áp dụng hiệu ứng mờ (blur).
.-with-grayscale	Áp dụng hiệu ứng thang xám (grayscale).

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
--pantoken-img	—	—	filter <filter-value-list> | none — Bộ lọc CSS hợp thành trên ảnh; các bộ chỉnh hiệu ứng thiết lập nó, và bạn có thể ghi đè để dùng bộ lọc tùy chỉnh.

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-img-effect-transition-duration	<time>	1s
--instui-component-img-image-blur-amount	<length>	0.25em
--pantoken-img-filter	none | <filter-value-list> | <-ms-filter-function-list>	none