Как сверстать вот такой блочок

[Anna Zharova]

Столкнулась с небольшой проблемой при верстке вот такого блока http://prntscr.com/56kp3s

 

Макет: http://prntscr.com/56kovy

 

Особенность в том что картинки подставляются прямоугольные, а не квадратные (тут проблем нет).

Помогите сверстать красивое кроссбраузерное решение.

 

Вот что пока у меня получилось http://azharova.ru/test/kruglyash.html#

Edited November 15, 2014 by Anna Zharova

[DivMan]

скинь зипом изображения.

 

Саму картинку вырезал бы квадратной, засунул бы её в блок и закруглил с помощью border-radius.

Я бы отдельно вырезал вилку, а нож и ложку одной картинкой и вставил бы их с помощью before и after.

Edited November 15, 2014 by DivMan

[Anna Zharova]

Так получается, что я переделываю уже существующую верстку и после последнего обновления, картинки стало плющить. Там вся геометрия нарушена.

 картинки подтягиваются из статей сайта, они все разные, каким способом их обрезать?

 

Вот картинки: https://yadi.sk/d/VbgXb6EEcj3tV

Edited November 15, 2014 by Anna Zharova

[DivMan]

вот так получилось http://jsfiddle.net/w8n95wvp/3/

 

надо убрать margin-left:20px;

 

 

Вот ещё 1 способ, там я детей немного приподнял http://jsfiddle.net/w8n95wvp/5/

Edited November 15, 2014 by DivMan

[sigma77]

http://jsfiddle.net/3mpkckwo/ - центр картинки будет всегда совпадать с центом круга. Не универсально, но угадать, где будет значимая часть картинки средствами css не реально.

 

картинки подтягиваются из статей сайта, они все разные, каким способом их обрезать?

 

обрезать на сервере, но это уже задача программиста

[Anna Zharova]

обрезать на сервере, но это уже задача программиста

 

Беру, это за рабочую версию