Cropping images with Object Fit
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/examples/object-fit-photos.html or on CodePen: http://codepen.io/jensimmons/pen/jqKNxg?editors=1100
• Article w/ header layout: https://labs.jensimmons.com/2016/examples/grace-hopper-page.html or on CodePen: http://codepen.io/jensimmons/pen/wGXwNb?editors=1100
• Samples of options for Object Fit: http://labs.jensimmons.com/2016/examples/object-fit.html or on CodePen: http://codepen.io/jensimmons/pen/ZWRzjQ?editors=1100
MDN Web Docs:
• Object Fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
• Object Position: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
Видео Cropping images with Object Fit канала Layout Land
Demos:
• Simple photos: http://labs.jensimmons.com/2016/examples/object-fit-photos.html or on CodePen: http://codepen.io/jensimmons/pen/jqKNxg?editors=1100
• Article w/ header layout: https://labs.jensimmons.com/2016/examples/grace-hopper-page.html or on CodePen: http://codepen.io/jensimmons/pen/wGXwNb?editors=1100
• Samples of options for Object Fit: http://labs.jensimmons.com/2016/examples/object-fit.html or on CodePen: http://codepen.io/jensimmons/pen/ZWRzjQ?editors=1100
MDN Web Docs:
• Object Fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
• Object Position: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
Видео Cropping images with Object Fit канала Layout Land
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Designing for A Viewport](https://i.ytimg.com/vi/QY3lTBZnJmE/default.jpg)
![How to use CSS object-fit to control your images](https://i.ytimg.com/vi/6yAAV-uP0po/default.jpg)
![Introduction to Viewport Units](https://i.ytimg.com/vi/_sgF8I-Q1Gs/default.jpg)
![Min & Max Content Sizing in CSS Grid — 1/3 Flexibility](https://i.ytimg.com/vi/lZ2JX_6SGNI/default.jpg)
![Jen Simmons: Revolutionize your page: Real art direction on the web](https://i.ytimg.com/vi/HjMQ8b9S4iU/default.jpg)
![](https://i.ytimg.com/vi/DcY1nJgjzVc/default.jpg)
![FR Units in CSS Grid — 2/3 Flexibility](https://i.ytimg.com/vi/ZPtpzuRajzM/default.jpg)
![Hot metal : Pasteup :: Floats : CSS Grid](https://i.ytimg.com/vi/E005mjqpZ9Y/default.jpg)
![The object-fit property in CSS - Maintain aspect ratio on images or video - Web Design Tutorial](https://i.ytimg.com/vi/gj4zoaigSqI/default.jpg)
![Jaron Lanier interview on how social media ruins your life](https://i.ytimg.com/vi/kc_Jq42Og7Q/default.jpg)
![9 Biggest Mistakes with CSS Grid](https://i.ytimg.com/vi/0Gr1XSyxZy0/default.jpg)
![Basics of CSS Grid: The Big Picture](https://i.ytimg.com/vi/FEnRpy9Xfes/default.jpg)
![Responsive Mondrian – a demo of CSS Grid](https://i.ytimg.com/vi/qNtJ5p3h2A4/default.jpg)
![Flexbox vs. CSS Grid — Which is Better?](https://i.ytimg.com/vi/hs3piaN4b5I/default.jpg)
![Skills You Should Learn During Lockdown](https://i.ytimg.com/vi/OzaZUQ5FKpI/default.jpg)
![Using Flexbox + CSS Grid Together: Easy Gallery Layout](https://i.ytimg.com/vi/dQHtT47eH0M/default.jpg)
![CSS Grid like you are Jan Tschichold](https://i.ytimg.com/vi/OxrsO4aIjyc/default.jpg)
![Flexibility & The Fold – new possibilities with CSS Grid](https://i.ytimg.com/vi/EEOJZy_Gge4/default.jpg)
![Use Clip Path to Vary Your Designs on the Web](https://i.ytimg.com/vi/3kncTIpc4Q4/default.jpg)
![Making Your CSS Fail Excellently – 7/7 Resilient CSS](https://i.ytimg.com/vi/X3xvMKgtB-c/default.jpg)