Equalize The Width & Height Of Images - jQuery Uniformify

The Uniformify jQuery plugin dynamically equalizes the width and height of a group of images to create a neat, uniform image grid for photography or portfolio websites.

How to use it:

1. Download and include the jQuery Uniformify plugin on the webpage which has jQuery JavaScript library loaded.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<link href="uniformimages.css" rel="stylesheet">
<script src="uniformimages.js"></script>

<!-- Or From CDN -->
<link href="https://cdn.jsdelivr.net/gh/chigozieorunta/uniformimages/uniformimages.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/chigozieorunta/uniformimages/uniformimages.min.js"></script>

2. Add the CSS class unim to the images and done.

<div class="col-sm-3">
  <a href="#">
    <img src="1.jpg" class="unim"/>
  </a>
</div>
<div class="col-sm-3">
  <a href="#">
    <img src="2.jpg" class="unim"/>
  </a>
</div>
<div class="col-sm-3">
  <a href="#">
    <img src="3.jpg" class="unim"/>
  </a>
</div>
<div class="col-sm-3">
  <a href="#">
    <img src="4.jpg" class="unim"/>
  </a>
</div>
...

3. Apply additional styling to the images.

• unim-square
• unim-circle
• unim-landscape
• unim-portrait

<div class="col-sm-3">
  <a href="#">
    <img src="1.jpg" class="unim-circle"/>
  </a>
</div>
<div class="col-sm-3">
  <a href="#">
    <img src="2.jpg" class="unim-circle"/>
  </a>
</div>
<div class="col-sm-3">
  <a href="#">
    <img src="3.jpg" class="unim-circle"/>
  </a>
</div>
<div class="col-sm-3">
  <a href="#">
    <img src="4.jpg" class="unim-circle"/>
  </a>
</div>
...

Changelog:

2019-02-20

• JS & CSS update

2019-02-19

• JS & CSS update

---

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