Загрузка страницы

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
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
3 апреля 2018 г. 9:30:02
00:05:06
Яндекс.Метрика