Отображение изображений с переменным соотношением сторон, таких как фотографии профиля или фотографии продуктов, внутри повторяющейся сетки из элементов одинакового размера, таких как карточки, может вызвать визуальную проблему.

У вас есть варианты: либо иметь идеально подобранные фотографии для вашего дизайна, либо сделать что-то вроде abackground-position: cover;, где побочным эффектом является увеличенная, обрезанная версия вашего изображения. Последний вариант — иметь разное пустое пространство и заполнить его либо нейтральным цветом, либо средним цветом, либо использовать размытый фон содержащейся фотографии.

Столкнувшись с этой проблемой, я сначала попытался просто заполнить фон нейтральным серым цветом. Результат:

Хотя в данном случае это не слишком неприятно, я хотел чего-то получше, поэтому моей первой идеей было динамическое получение среднего значения цвета с помощью javascript и использование его в качестве заливки фона позади изображений.

Я быстро нашел некоторые решения, перечисленные здесь:

https://www.npmjs.com/package/fast-average-color
https://github.com/nitin42/react-color-extractor
https://stackoverflow .com/questions/2541481/получить-средний-цвет-изображения-через-javascript

Однако, к счастью, я столкнулся с проблемой CORS браузера, как указано в S.O. нить:

Обратите внимание, что это будет работать только с изображениями в том же домене и в браузерах, поддерживающих холст HTML5.

— учитывая, что мои изображения в то время размещались на другом домене, и я не мог ничего изменить. Проблема также сохранялась в перечисленных выше пакетах npm. Короче говоря, я отказался от усреднения цвета.

Моя следующая идея состояла в том, чтобы взять изображение (фото профиля в моем случае) и использовать его увеличенную + размытую версию в качестве фона. (Это обычная стратегия, используемая приложениями для социальных сетей). Результат выглядит следующим образом:

Решение Codepen здесь: https://codepen.io/yev-/pen/popXYLW

Несколько вещей, чтобы рассмотреть…

  • Размытие вызовет эффект свечения переполнения на ваших изображениях, поэтому компонент-оболочка должен иметь overflow: hidden;
  • Даже со скрытым переполнением мне пришлось добавить следующее, чтобы уменьшить эффект белого свечения вокруг границ моего компонента-обертки:
.blur-bg {
 position: absolute;
 left: -25px;
 right: -25px;
 top: -25px;
 bottom: -25px;
 ...
}

Вы можете настроить отрицательные смещения здесь, чтобы они соответствовали пропорции размеров вашего контейнера. Обратите внимание, что это также можно сделать с помощью свойства clip-path, но его поддержка браузерами более ограничена.

Некоторые другие свойства, которые вы захотите настроить, — это само расстояние размытия и коэффициент масштабирования преобразования. Я считаю, что идеальные значения здесь зависят от размеров компонентов оболочки:

.blur-bg {
 ...
 -webkit-filter: blur(15px);
     -moz-filter: blur(15px);
          filter: blur(15px);
  transform: scale(1.8);
 ...
}

Полная демонстрация: https://codepen.io/yev-/pen/popXYLW

Вот и все. Удачного кодирования.