Проблемы с overflow при обрезанной картинке

[advokatua]

http://jsfiddle.net/xJWre/18/

Может еще не проснулся, не знаю, но что-то не могу придумать/вспомнить как в максимум два вложения сделать одинаковые границы от каждого края.

Картинка, конечно же, больше изначального блока и наша задача ее НЕ масштабировать, а немного отцентрировать и обвести границей которая отступает от краев картинки на пару пикселей.

PS. Возник вариант на box-shadow, но это слишком просто и в ИЕ7 не покатит.

PSs. И с outline также не предлагать

Edited November 2, 2013 by advokatua

[3d_max_9]

могу предложить такой вариант:

.boom {
    display:inline-block;
    margin:-85px 0px 0px -100px;
}

[advokatua]

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

[Catherine]

А clip подойдёт? http://jsfiddle.net/Cath_kb/xJWre/19/

[advokatua]

нет, потому что ИЕ8 опять отдыхает.

 

Пытаюсь придумать вариант который хотя бы до ИЕ8 дойдет. Но что-то уже сомневаюсь, что без 3-ех блоков получится.

 

Outline можно повесить, но он ведь не для этого предназначен (насколько я помню). Т.е. какие-то рамки или фюшечки через него лучше не делать.

[Catherine]

нет, потому что ИЕ8 опять отдыхает.

разве? http://htmlbook.ru/css/clip
 Internet Explorer до версии 7.0 включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px).

[advokatua]

А вот тут другая инфа http://caniuse.com/#search=clip

Возможно тут имелась ввиду поддержка всего списка нововведений, а не конкретно клипа. Тогда надо потестить.

Edited November 2, 2013 by advokatua

[Catherine]

Не путайте background-clip (http://www.w3.org/TR/css3-background/#background-clip) со свойством clip (http://www.w3.org/TR/CSS2/visufx.html#clipping)

[advokatua]

Решено

 

Да, через clip все работает. Правда количество потраченного времени на высчитывание отступов себя не оправдывает. По крайней мере в моем случае.