Плагин imgLiquid

Плагин imgLiquid - это плагин jQuery, который используется для изменения размера изображений в контейнере фиксированной ширины и высоты. Страница плагина - imgLiquid

После скачивания файлов плагина imgLiquid его необходимо подключить:

<script src="js/imgLiquid-min.js"></script>

Или загружать библиотеку из серверов CDNJS, что позволит значительно облегчить нагрузку на сервер, загрузить скрипт более быстро, поскольку CDN распространяет контент, чтобы он был ближе к пользователю, и параллельно извлекать данные браузером, что приводит к более быстрому отображению страницы. Кроме того, загрузка скриптов из серверов CDN сохраняет в кеше, что позволит не загружать их дважды:

https://cdnjs.cloudflare.com/ajax/libs/imgLiquid/0.9.944/js/imgLiquid-min.js

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

https://cdnjs.cloudflare.com/ajax/libs/imgLiquid/0.9.944/js/imgLiquid.js

Обязательно перед использованием необходимо подключить библиотеку jQuery.

Для использования скрипта необходимо его инициализировать, указав в настройке необходимый класс для изображения:

$(document).ready(function() {
    $(".imgLiquid").imgLiquid();
});

Изображения, которые должны помещаться в рамку, должны быть обрамлены данным классом:

<div class="imgLiquid" style="width:200px; height:100px;">
    <img src="images.jpg" />
</div>

Последнее, что необходимо сделать, это добавить стили:

.imgLiquid img{visibility: hidden}

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