Отображение изображений с переменным соотношением сторон, таких как фотографии профиля или фотографии продуктов, внутри повторяющейся сетки из элементов одинакового размера, таких как карточки, может вызвать визуальную проблему.
У вас есть варианты: либо иметь идеально подобранные фотографии для вашего дизайна, либо сделать что-то вроде 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
Вот и все. Удачного кодирования.