Ahmad Shadeed - doet wat hij altijd zo goed doet - geeft een vroege blik op de object-view-box eigendom, iets wat hij beschrijft als een native manier om een afbeelding in de browser bij te snijden met CSS.
De gebruikssituatie? Nou, Ahmad verspilt geen tijd om te laten zien hoe het eigendom moet worden gebruikt om te bereiken wat vroeger ook nodig was (1) een verpakkingselement met verborgen overloop rond een afbeelding met een formaat en gepositioneerd binnen dat element of (2) de background-image route.
Maar object-view-box we kunnen in wezen de beeldgrenzen trekken zoals we kunnen met een SVG's viewbox. Dus, neem een gewone ol' <img> en bel op object-view-box om de randen bij te snijden met een inset functie. Ik laat gewoon Ahmads pen hier vallen:
Voorlopig alleen ondersteund in Chrome Canary, vrees ik. Maar het is (momenteel) gepland om vrijgeven in Chrome 104. Ergens anders:
