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

Question

[Сергей Горячев]

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

Answer 1

[Ярослав Иванов]

img {
   width: 100px;
   height: 100px;
   background-image: url(ссылка на картинку);
   background-size: cover;
}

width и height задает размер блока а cover задает размер по всему блоку не нарушая пропорций.
А если понадобится менять положение изображение то надо будет добавить

background-position-x: 100px;
background-position-y: 100px;

Answer 2

[DTX]

Если смущает использование background-image, то либо js, либо object-fit для img
codepen.io/robinrendle/pen/BywNVX
caniuse.com/#search=object-fit

Comments

[Сергей Горячев]

Ооо, ИЕ только нет, ну да и хрен с ним. Сейчас попробую)

Answer 3

[iBird Rose]

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

Comments

[Сергей Горячев]

Сайт стоит всего 30 тысяч, чтобы писать для него такую фичу)))

[iBird Rose]

Sergey Goryachev: ну тогда делать как описал Ярослав Иванов и для каждой загруженной фотки задавать параметры сдвига по X и Y, чтобы в круг попало лицо, а не другая часть тела)