Одинаковый размер миниатюр, картинок в галереи, списке новостей с помощью jQuery

Во многих сайтах мы видим миниатюры изображений одинакового размера. Это могут быть списки новостей, публикаций или фотогалереи. Через css бывает затруднительно делать фото одинакового размера, поэтому рассмотрим мой jQuery скрипт, который решит эту задачу. Для решения данной задачи можно использовать 3 подхода:

1. Через css свойства - об этом я писал в следующей статье (5 вариантов css адаптации).
2. С помощью php кода - данный способ обычно предусматривает скрипт, который обрезает фотографию и сохраняет ее в нужных размерах.
3. И третий вариант - с помощью jQuery скрипта. Рассмотрим его подробнее.

Мой код способен на лету адаптировать картинку в нужных пропорциях. Рамкой, которая ограничивает размеры картинки будет являться div с классом .bjcontainer. Зададим на нее стиль: <style>.bjcontainer {width: 230px;height: 230px;overflow: hidden;float: left;margin: 0px 10px 10px 0px;}</style> Все, что вам нужно для работы скрипта, ограничить картинку данным div-ом, вот так: <div class="bjcontainer"><img src="images/image2.jpg"></div> Далее скрипт автоматически подстроит картинку согласно пропорций, которые заданы в .bjcontainer (ширина и высота). Скачать скрипт или просмотреть его в работе вы можете по кнопкам ниже.

Посмотрите как бы выглядели фотографии без скрипта (все идут в разнобой и видна только часть картинки):

И со скриптом (все вписаны в рамки и позиционированы по центру):

Для демонстрации работы кода я собрал картинки самых разных размеров: квадратные, прямоугольные, сильно вертикальные или горизонтальные, больше рамки .bjcontainer и меньше ее. В любых случаях скрипт адаптирует картинку под рамку .bjcontainer: если исходная картинка меньше рамки, то растягивает ее под нее, если больше, то вписывает по ширине или высоте, а затем автоматически позиционирует ее по центру внутри .bjcontainer. Данный скрипт для работы требует подключенную библиотеки jQuery и практически не загружает сайт. Думаю, для создания интересных сайтов он вам может очень пригодиться. Желаю успехов в разработке!