Streaming live at 10am (PST)

How to auto "crop" CMS collection list images (16:9 aspect ratio example)

#1

** Long scroll but less than 1 min to implement.

"The problem"
You want to upload difference size images and always keep aspect ratio of 16:9 (Or any other aspect ratio).

Without any styles this is the result “broken layout”:

End result:

Solution

1/2. By background-image

First, its easier to solve this by empty div and BG-images (Use background-position: center center; and background-size: cover;

About the height? Set height to 0 and use padding-top.

Example: 16:9 Aspect Ratio

.thumbnail{
   padding-top: 56.25%; /*  **16:9 Aspect Ratio**  */
}

Related:
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Result:


2/2. A better solution - by “images”

Why to use images? (And not bg)
1. Fast loading (responsive image), Better 2. SEO(And better Image SEO), Improve 3. Accessibility (Remember to add image alts). And last, more valid code.

How to:

  1. Add wrapper for the image
    image
  2. Set the wrapper position to relative and padding-top to 56.25%:
  3. Add class for the image and set this values:
  • width: 100%;
  • height:100%;
  • position: absolute;

Middle result:
The “vertical image” squeeze (Because we set the height and width to 100%).

— Last Step – Solution.
Add one line of custom code:

  1. If you don’t know css get the selector like this (right click and inspect)
    image
  2. get class name
  3. Add this custom code block (Before body/head per page/entire-project).
<style>
/* The object-fit property defines how an element responds 
to the height and width of its content box. */
.post-thumbnail {
	object-fit: cover;
}
</style>

object-fit docs:


summary

Publish :slight_smile:

LIVE URL result:


Related?

You don’t want to crop images. Use masonry

By custom code:

By webflow:
https://preview.webflow.com/preview/flow-in?preview=99d20c3007c32ab09ef1da4455a8de8c&pageId=569822bb4110f7782d8f30b7&fbclid=IwAR2Qi0yfK63jU3XmsWX0Hn0o-Xb96l9bmY-E6FuuX7Eh6fMQB9mJrUhCtgo

6 Likes
Blog - Making thumbnails images the same size
#2

If you want to use “img” trick above for regular flexbox grid ("not CMS"). Do not add padding-bottom: 56.25% For the col himself (Create extra div/wrapper):

image

1 Like
#3

Thanks for sharing @Siton_Systems :webflow_heart:

1 Like