Primero observe la propiedad CSS object-view-box | Trucos CSS

Ahmad Shadid - hace lo que siempre hace tan bien - proporciona una primera mirada a object-view-box Propiedadalgo que describe como una forma nativa de recortar una imagen en un navegador CSS.

El caso de uso? Bueno, Ahmad no está perdiendo el tiempo mostrando cómo usar la propiedad para lograr lo que requiere o (1) un elemento envolvente con un degradado oculto alrededor de una imagen que está dimensionada y posicionada dentro de ese elemento, o (2) sobre background-image ruta.

Pero con object-view-box esencialmente podemos dibujar los límites de la imagen como podemos con SVG viewboxEntonces, toma uno simple y viejo <img> y llama object-view-box para recortar los bordes usando inset función. Solo dejaré caer la pluma de Ahmad aquí:

Me temo que solo es compatible con Chrome Canary, pero está (actualmente) planeado ejecutar en cromo 104.En algún otro lugar: