** Long scroll but less than 1 min to implement.
You want to upload difference size images and always keep the aspect ratio of
16:9 (Or any other aspect ratios).
Without any styles this is the result “broken layout”:
Solution - by “images” CSS trick (cropping-images-object-fit)
Why to use images? (And not bg)
1. Faster loading (Support webflow responsive image) feature, Better 2. SEO(And better Image SEO), Improve 3. Accessibility (Remember to add image
alts). And last, more valid code.
- Add extra div wrapper for the
- Set wrapper position to
relativeand padding-top to
56.25% read her How TO - Aspect Ratio - w3schools
/* usefull aspect ratios */ 1:1 | 100% ==> SQUARE 16:9 | 56.25% 4:3 | 75% 3:2 | 66.66% 8:5 | 62.5%
- Add class for the
imageand set this values:
position: absolute;webflow position absolute docs
The “vertical image” squeeze (Because we set the height and width to 100%).
fit to cover
Extra setting if you want:
**The same idea could work with background images (And
You don’t want to crop images. Use masonry
By custom code: