Как обработать изображение с тенью?

Question

[nepster-web]

Есть примерно такой вот изображение:


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

К примеру это изображение будет 400 пиксилей. И есть блок в котором это изображение находится, к примеру блок будет 300 пиксилей. Можно ли расположить это изображение по центру блока таким, чтобы блок в 300 пиксилей резал 50 пиксилей изображения слева и 50 справа, и при этом не используя background и отрицательные марджины ?

Answer 1

[Александр Вульф]

А чем вас не устроил вариант с background?

Comments

[nepster-web]

в целях обучения и практики.

Answer 2

[kefiijrw]

Очень коряво, но формально без фона и отрицательных отступов: jsfiddle.net/orcr6dqn/2

Comments

[nepster-web]

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

Answer 3

[xmoonlight]

GD2, imagemagick - выбирайте)

Comments

[nepster-web]

никаких серверных решений при верстке

[xmoonlight]

js-canvas ))