Skip to content

Normalize the size of a group of images, optically, based on their aspect ratios

Notifications You must be signed in to change notification settings

kni-labs/optical-image-sizing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

optical-image-sizing

Normalize the size of a set of images, optically, based on their aspect ratios. See it in action on this Codepen.

grid of logos, before and after normalization

What is this?

This is a small script that loops through all the images of a specified container and resizes them to be similarly sized. This is especially handy on logos, but has other applications as well (product images, etc).

Why not scale the images manually?

The absolute best way to insure a set of images always looks sized properly in relation to each other is to manually size them within the same-sized containers. Many times this isn't feasible or a good use of time. This also becomes problematic when there are many images or they need to be added dynamically from a backend (from client).

Why not just use object-fit?

This solution does use object-fit, but there are limitations to the amount of normalization that can happen with object-fit. Even with max-height and other tricks, images with different aspect-ratios will always appear as different visual sizes. object-fit vs script

The solution - Scaling along a curve

The solution for this is to set the scale amount based on where the image's aspect ratio lands on a curve:

Scaling along a curve

So, the wider an image, the less it scales, the closer it gets to square, the more it scales. (For logos taller than 1:1 the script essentially reverses the process back down the curve.)

Usage

  1. Add a container with the class .arScale that holds your images. Each image will also need to have a parent container (ie div or figure)
<div class="arScale">
  <figure><img src="img1.jpg"></figure>
  <figure><img src="img2.jpg"></figure>
  <figure><img src="img2.jpg"></figure>
</div>
  1. Attach or add the javascript file:
<script src="path-to/optical-image-sizing.js"></script>

You can also add this and the css with npm.

  1. Add required css:
/* modify container to suit your needs */
.arScale {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 3%;
  column-gap: 6%;
}
/* required */
.arScale > * {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  aspect-ratio: 1/1;
  text-align: center;
  display: flex;
  align-items: center;
}
/* required */
.arScale img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
  transform: scale(var(--scaleBy));
}

The script will find the height and with of any image in that container then scale it accordingly.

About

Normalize the size of a group of images, optically, based on their aspect ratios

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published