Pure CSS / JQuery Solution для центрирования / обрезки изображений разных размеров в наборе размеров

Question

Я работаю на веб-сайте сообщества с миниатюрами немного разных размеров.

У меня есть блок div, установленный на 165x165 пикселей.

Некоторые полноразмерные миниатюрные изображения имеют размер 165 пикселей, другие - 180, 192, 205 и т. Д.

То, что я хотел бы сделать, это заставить их отображаться горизонтально по центру внутри блока div не шире, чем 165 пикселей. Поэтому, если изображение будет иметь размер 185 пикселей по горизонтали, оно обрежется на 10 пикселей влево и на 10 пикселей вправо. Изображение в 205 пикселей по горизонтали будет обрезано по 20 пикселей с каждой стороны.

К сожалению, для этого у меня не будет доступа к коду на стороне сервера, поэтому все это должно быть выполнено с помощью javascript и / или jquery.

Самая большая проблема, с которой я сталкиваюсь, заключается в том, что размеры изображений постоянно меняются.

Answer 1

Вы должны иметь возможность поставить overflow:hidden на <div> и позволить браузеру справиться с отсечением. Примерно так:

<div style="width: 165px; height: 165px; overflow: hidden;">
    <img ...>
</div>

Живой пример: http://jsfiddle.net/ambiguous/M3FzZ/

Если вам нужно сделать это в jQuery, то:

$('div-selector').css('overflow', 'hidden');

Где "div-selector" - это тот селектор, который вам нужен для получения <div> s.