После скачивания файлов плагина 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}
После очень простых манипуляций можно добиться изменения размера изображения, которое будет точно помещаться в рамку.