Logo Zephyrnet

Cái nhìn đầu tiên về thuộc tính hộp xem đối tượng CSS

Ngày:

Ahmad Shadeed — làm điều mà anh ấy luôn làm rất tốt — cung cấp một cái nhìn sớm về object-view-box tài sản, điều mà anh ấy mô tả là một cách tự nhiên để cắt hình ảnh trong trình duyệt bằng CSS.

Trường hợp sử dụng? Chà, Ahmad không lãng phí thời gian chỉ ra cách sử dụng tài sản để hoàn thành những gì từng yêu cầu (1) phần tử bao bọc có phần tràn ẩn xung quanh hình ảnh có kích thước và vị trí bên trong phần tử đó hoặc (2) các background-image tuyến đường.

Nhưng với object-view-box về cơ bản chúng ta có thể vẽ ranh giới hình ảnh như chúng ta có thể làm với SVG viewbox. Vì vậy, hãy hiểu một cách đơn giản <img> và kêu gọi object-view-box để cắt các cạnh bằng cách sử dụng một inset chức năng. Tôi sẽ đơn giản thả cây bút của Ahmad vào đây:

Tôi e rằng hiện tại chỉ được hỗ trợ trong Chrome Canary. Nhưng nó (hiện tại) đang được lên kế hoạch phát hành trong Chrome 104. Ở nơi khác:


Liên kết trực tiếp & rarr;

tại chỗ_img

Tin tức mới nhất

tại chỗ_img