Задать вопрос
@Tokashi7

Как красиво вставить прямоугольное изображение в квадратную область?

На контентном сайте есть одинаковые карточки. В их верхней части располагается КВАДРАТНЫЙ div для вставки изображения. Менять размеры этого div нельзя. Изображения, которые вставляются туда, имеют разные размеры (НЕ КВАДРАТНЫЕ). Если вставлять прямоугольное изображение в квадратный div (изображение нельзя обрезать), то сверху и снизу остаются ПОЛЯ.
Как наиболее красиво заполнить их?
5ce04b813ec08835245843.jpeg
Есть вариант дублированного и РАСТЯНУТОГО этого же изображения как background div (на втором плане), применив к нему эффекты размытия и затемнения.
Есть вариант с тенью, но выглядит крайне плохо.
  • Вопрос задан
  • 468 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
arutyunov
@arutyunov
Mooza.ru — Делаем сайты
Используйте популярный вариант с растягиванием и блюром, как многие делают в инсте, например:
02-Vertical-Phone-Background-Scale.jpg
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы