Как с помощью CSS и HTML показать только часть картинки

[Alok]

Можно ли вывести на экран обрезанную картинку, используя только html и css, но при этом, не используя (float: left)
Необходимо центрировать и масштабировать картинку по экрану и, желательно, сохранить радиусы и тени.
В примере ниже используются два изображения:
Верхнее - 1600х900 (размеры всегда такие)
Нижнее - 800х900 (размеры всегда такие) - т.е. ровно половина от первого рисунка со смещением от левого края на Х пикселей.
Можно ли не загружать для этого два изображения, а  для отображения второго рисунка использовать только первый с указанием отступа Х от левого края?

То, что должно получиться - на картинке с тигром.
Помогите, у кого есть время. Я нашел варианты, но они не дают возможности сжимать картинку с % от ширины экрана. Буду очень благодарен за помощь!

Скрытый текст

=html=

<div class="full"><img src="http://s018.radikal.ru/i510/1607/6d/a1b9bcc9aaf0.jpg"></div>
</br></br>
<div class="full"><img src="http://i062.radikal.ru/1607/6d/d3f19ba9c588.jpg"></div>

 

=css=

.full {
    width: 25%;
    border-radius: 5%;
    box-shadow:  -2px -2px 6px 2px rgba(0,0,0,0.99), 2px 2px 6px 2px rgba(255,255,255,0.35), inset 2px 2px 6px rgba(0,0,0,0.99), inset -2px -2px 6px rgba(255,255,255,0.35);
    margin: 0 auto;
}

.full img {
    border-radius: 5%;
    vertical-align: middle;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -1;
}

Edited July 28, 2016 by Alok

[Alok]

Вот как должно быть https://youtu.be/putpGH4nL4M

Здесь я использую два рисунка. Верхний - исходник, а нижний делаю в фотошопе. А задача сделать все из одного. Так же правильнее будет?!
Там правда у меня еще таблица (две вертикальных пары картинок)... но мне хотя бы просто в одном варианте (одну вертикальную пару), а дальше я и сам справлюсь)

Edited July 28, 2016 by Alok

[Alok]

Уфф... вроде бы сделал!

http://jsfiddle.net/qso14y3k/56/