"Обрезка" и выравнивание картинок (как сделать?)

[d0ublezer0]

Здрасте всем.

 

вот пример: http://brendov.com/news-actions

 

часть картинок в каталоге имеет разные пропорции. из-за этого строки с товарами получаются разной высоты.

заранее делать предобработку картинки клиент не сможет, там просто некому.

 

подскажите решение, как сделать картинки одинаковыми по высоте, при этом перекрывая обрамляющим элементом "уши" картинки?

 

P.S. есть подозрение, что очень просто, но видимо я заработался, и не вижу решения в упор.

Edited February 25, 2014 by d0ublezer0

[iKNG]

http://jsfiddle.net/gujbg/

[Great Rash]

Я чуток улучшил - http://jsfiddle.net/gujbg/2/

[d0ublezer0]

Спасибо, ребята, но не совсем то, чего я пытаюсь добиться.

на примере лемура, как широкой картинки:

он должен быть визуально "обрезан" родительским  элементом при этом быть максимум в высоту (по размеру родителя)

я так подозреваю, что нужен еще один, "перекрывающий" элемент.

Вот скрин как надо:

Так возможно?

В текущей разметке без дополнительного элемента не выходит.

Edited February 25, 2014 by d0ublezer0

[iKNG]

Не совсем понял. Вам надо, чтобы именно обрезан был? Или с отступом по бокам? Вообще, в примере он ограничен по бокам, в отличие от высоты, которая не ограничена + по всем сторонам отступы. Вам так надо?

 

P. S. Еще улучшил первый вариант: http://jsfiddle.net/gujbg/8/ Вам случайно не так надо?

Edited February 25, 2014 by iKNG

[d0ublezer0]

Увы, нет, не так.

Точнее, не совсем.

 

Нужно чтобы и отступы были и обрезание по краям (справа и слева, в случае, если картинка выходит за пределы отступов).

При этом картинки разных размеров и пропорций. для разного разрешения экрана используется разная высота картинки, масштабирование осуществляется браузером.

Я не знаю, как это можно ещё объяснить..

Ну в моем понимании должно получиться примерно так:

Картинка с галстуком (как и остальные в строке) имеет фиксированную высоту. То, что выделено фиолетовым цветом - должно отсекаться. Центрирование картинки внутри родител должно осуществляться автоматически, т.к. все картинки могут быть разных размеров.

примерно как то так:

http://jsfiddle.net/gujbg/13/

 

только картинки не по центру

Edited February 25, 2014 by d0ublezer0

[d0ublezer0]

Я так понимаю, вы использовали способ отсюда

 

Но если картинка (как в моем случае) выходит за пределы родителя, выравнивание по центру не работает.

[Great Rash]

Так чтоль? http://jsfiddle.net/gujbg/14/

[d0ublezer0]

Вот так:

http://jsfiddle.net/gujbg/13/

 

Но не могу добиться, чтобы картинка центрировалась.

[Great Rash]

http://jsfiddle.net/gujbg/15/

[d0ublezer0]

Спасибо, как раз оно.

Я так понял, из span получается такой псевдо-центр, за счет его большой ширины.

[Great Rash]

Да, он нужен лишь для центровки <img>.