Object-Fit Focal Point

Generate the object-position value to capture an image's focal point given a custom aspect-ratio.

reference for original image
View full original image
.image {
  max-width: 100%;
  height: auto;
  aspect-ratio: 5/3;
  object-fit: cover;
  object-position: 0% 86%;
}

About

This utility was built with the static site generator Eleventy and was created by Stephanie Eckles who is both a big fan of 11ty and an advocate for modern CSS.

The primary dependency is the sharp package resize API to help calculate the focal point using Shannon entropy. Dynamically generated results are possible thanks to Eleventy Serverless.

The examples using a ratio require browser support for aspect-ratio (available in all evergreen browsers once Safari 15 is released).

Unfamilar with object-fit? Check out my 2.5 minute free egghead video >

Credit for demo photo goes to Joshua Oyebanji on Unsplash.

API Options

Send a full, absolute image path as the image URL parameter to https://objectfit-focalpoint.netlify.app/generate/ to receive the default adjustments based on an aspect-ratio of 5/3.

https://objectfit-focalpoint.netlify.app/generate/?image=https://source.unsplash.com/0kCrlrs8gXg/700x900

Custom Ratio

To customize the ratio used, add &ratio=x/y.

https://objectfit-focalpoint.netlify.app/generate/?image=https://source.unsplash.com/0kCrlrs8gXg/700x900&ratio=8/3

Note: if you'd like a square, pass &ratio=1/1.

Use Image Dimensions

Optionally, pass a desired image width and height to be used instead of an aspect ratio for determining the object-position value.

https://objectfit-focalpoint.netlify.app/generate/?image=https://source.unsplash.com/0kCrlrs8gXg/700x900&width=700&height=500

Eleventy Plugin

A plugin is available for install into your own Eleventy project to include this functionality as a Nunjucks shortcode. Get the plugin >