webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

Как лучше сверстать фотографии разных размеров?

Честно говоря, сломал уже всю голову.
Задачка простая, типичная, но никак не могу понять, как правильней к ней подступиться.
На сайт выводятся отзывы от клиентов.
И фотографии нужно сделать так, чтобы всегда были одного размера.
Ну, то есть вписать в квадратик, точнее в круг, но это не проблема - border-radius.
Не могу придумать, как лучше их обрезать и вписывать в круг)))
Могут быть квадратные фото, горизонтальные и вертикальные.
И сделать это нужно на стороне верстки, серверная часть не правится тут)))

7f52851045814c59a6a51e76ba0494cd.png7fc10a23f19a487b87793c2c981c9f41.png
  • Вопрос задан
  • 259 просмотров
Решения вопроса 2
space2pacman
@space2pacman Куратор тега CSS
Просто царь.
img {
   width: 100px;
   height: 100px;
   background-image: url(ссылка на картинку);
   background-size: cover;
}


width и height задает размер блока а cover задает размер по всему блоку не нарушая пропорций.
А если понадобится менять положение изображение то надо будет добавить
background-position-x: 100px;
background-position-y: 100px;
Ответ написан
Комментировать
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
Если смущает использование background-image, то либо js, либо object-fit для img
codepen.io/robinrendle/pen/BywNVX
caniuse.com/#search=object-fit
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
со стороны фронтенда нормально это не реализовать. всегда найдется фотка, которая будет не вписываться. поэтому собственно все нормальные соц сети и сайты после загрузки фотки предлагают ее обрезать так чтобы она стала квадратной или круглой и чтобы в нее влезло нужное место фотографии, а не попало только плечо или верх головы.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы