Ahmad Shadeed — faisant ce qu'il fait toujours si bien — donne un premier aperçu de la object-view-box propriété, quelque chose qu'il décrit comme une manière native de recadrer une image dans le navigateur avec CSS.
Le cas d'utilisation ? Eh bien, Ahmad ne perd pas de temps à montrer comment utiliser la propriété pour accomplir ce qui nécessitait auparavant soit (1) un élément d'habillage avec débordement caché autour d'une image dimensionnée et positionnée à l'intérieur de cet élément ou (2) le background-image trajet.
Mais avec object-view-box nous pouvons essentiellement tracer les limites de l'image comme on peut avec un SVG viewbox. Alors, prends un bon vieux <img> et faire appel object-view-box couper les bords à l'aide d'un inset fonction. Je vais simplement déposer le stylo d'Ahmad ici :
Uniquement pris en charge dans Chrome Canary pour l'instant, j'en ai peur. Mais il est (actuellement) prévu de version dans Chrome 104. Autre part:
