Плагін 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}

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