Как подогнать размер картинки под заданный блок

[alleclf]

Хочу в блок вписать картинку, подгонка должна быть по меньшей стороне с сохранением пропорций.

 

Пример тут - http://jsfiddle.net/72anA/

 

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

 

На картинке ниже примерно показано как должно работать. Всё что вылазит за пределы блока должно обрезаться, в примере специально не обрезал для наглядности. То есть, блок должен быть заполнен центральной частью картинки.

 

Можно ли это реализовать без использования скриптов?

 

[Николя223]

Если так то через background position

[js5]

http://jsfiddle.net/72anA/5/

[Sensei]

Можно так http://jsfiddle.net/sensei/c3p3Z/

[alleclf]

Можно так http://jsfiddle.net/sensei/c3p3Z/

 

блок всегда должен быть одного размера

 

в результате должно быть вот так

[CroaToa]

Можно так http://jsfiddle.net/sensei/c3p3Z/

Вроде не меняется размер.. не?

Это я к ТС обращаюсь.

[alleclf]

Картинка может быть любой, от 100х100 до 1600х1200, сначала она должна смасштабироваться по меньшей стороне (уменьшится или увеличиться), потом отцентрироваться, а потом обрезаться.

Edited February 9, 2014 by alleclf

[js5]

вот сам себе и ответил почему это надо сделать с помощью скрипта

[Николя223]

http://jsfiddle.net/nikolya223/dWMfL/1/

[Sensei]

http://jsfiddle.net/sensei/xpdcJ/

[alleclf]

http://jsfiddle.net/sensei/xpdcJ/

Спасибо, то что надо!