blur extension на чистом css

Большая интересная статья о том как подгонять размеры изображения с помощью теней по бокам которые будут соответствовать.

Один из сниппетов из статьи: img { width: min(100%, 23em) ; aspect-ratio: 1; object-fit: contain; background: filter( src(attr(src)), url(#blur) brightness(0.8) contrast(0.7) ) 50% / cover; }

Прям чего-то нового для css тут нет, скорее удивителен сам файт такой комбинации. Но тут остается беда с поддержкой, не всё везде работает на данный момент, но в статье есть альтернативы с backdrop-filter и svg фильтрам.

Самое главное - в любом из способ нет js и уж тем более генерации на бэке картинок с тенями.

https://frontendmasters.com/blog/non-square-image-blur-extensions/