Cropping images with Object Fit

Layout Land
53.2K
19,770 views

Transcript

The interactive transcript could not be loaded.
Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Apr 2, 2018

If we want to create a layout where we specify both the height and width of an image, creating a flexible layout, we can use `object-fit` to crop the image.

Demos:
• Simple photos: http://labs.jensimmons.com/2016/examp... or on CodePen: http://codepen.io/jensimmons/pen/jqKN...
• Article w/ header layout: https://labs.jensimmons.com/2016/exam... or on CodePen: http://codepen.io/jensimmons/pen/wGXw...
• Samples of options for Object Fit: http://labs.jensimmons.com/2016/examp... or on CodePen: http://codepen.io/jensimmons/pen/ZWRz...

MDN Web Docs:
• Object Fit: https://developer.mozilla.org/en-US/d...
• Object Position: https://developer.mozilla.org/en-US/d...

Advertisement
When autoplay is enabled, a suggested video will automatically play next.

Up next

to add this to Watch Later

Add to