jQuery Plugin For Responsive Equal Height Images - packed-img-strip

packed-img-strip is a jQuery responsive equal height plugin which automatically stretches and shrinks img or figure elements (with varying width and height) to make them have the same height.

How to use it:

1. Assuming that you have a group of images with different sizes.

<div class="pack">
  <img src="http://via.placeholder.com/300x300"/>
  <img src="http://via.placeholder.com/450x150"/>
  <img src="http://via.placeholder.com/150x500"/>
  <img src="http://via.placeholder.com/300x300"/>
</div>

<!-- OR -->
<div class="pack">
  <figure>
    <img src="http://via.placeholder.com/300x300">
    <figcaption>Caption here</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/300x500">
    <figcaption>Caption here</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/600x150">
    <figcaption>Caption here</figcaption>
  </figure>
</div>

2. Include jQuery JavaScript library and the jQuery packed-img-strip plugin's files on the html page.

<link rel="stylesheet" href="jquery-packed-img-strip.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery-packed-img-strip.js"></script>

3. Call the function on the top container and done.

$(window).on('load', function() {
  $("div.pack").pack();
});

---

This awesome jQuery plugin is developed by tylerecouture. For more Advanced Usages, please check the demo page or visit the official website.