From daca10287bf6fbfb73aae24ce6e687520ace80e5 Mon Sep 17 00:00:00 2001
From: Matteo Guglielmetti <matteo.guglielmetti@click-shop.it>
Date: Fri, 26 Feb 2016 16:59:54 +0100
Subject: [PATCH] Added the object-fit tip

---
 README.md | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 07ee9bd3..fe899a78 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ A collection of tips to help take your CSS skills pro.
 1. [Style "Default" Links](#style-default-links)
 1. [Consistent Vertical Rhythm](#consistent-vertical-rhythm)
 1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes)
-
+1. [Easily Fit an Image Inside Its Container](#easily-fit-an-image-inside-its-container)
 
 ### Use `:not()` to Apply/Unapply Borders on Navigation
 
@@ -120,7 +120,7 @@ Use the `:not()` pseudo-class so no comma is added to the last item.
 
 ### Select Items Using Negative `nth-child`
 
-Use negative `nth-child` in CSS to select items 1 through n. 
+Use negative `nth-child` in CSS to select items 1 through n.
 
 ```css
 li {
@@ -198,7 +198,7 @@ Implement CSS-only sliders using `max-height` with overflow hidden:
 }
 ```
 
-The element expands to the `max-height` value on hover and the slider displays as a result of the overflow. 
+The element expands to the `max-height` value on hover and the slider displays as a result of the overflow.
 
 
 ### Inherit `box-sizing`
@@ -252,7 +252,7 @@ Now column gutters always appear evenly-spaced.
 
 ### Use Attribute Selectors with Empty Links
 
-Display links when the `<a>` element has no text value but the `href` attribute has a link: 
+Display links when the `<a>` element has no text value but the `href` attribute has a link:
 
 ```css
 a[href^="http"]:empty::before {
@@ -302,7 +302,7 @@ To create a box with an intrinsic ratio, all you need to do is apply top or bott
 }
 
 .container div {
-  border: 2px dashed #ddd;	
+  border: 2px dashed #ddd;
   height: 100%;
   left: 0;
   position: absolute;
@@ -314,6 +314,24 @@ To create a box with an intrinsic ratio, all you need to do is apply top or bott
 Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).
 
 
+### Easily Fit an Image Inside Its Container
+
+You can easily specify how an image (or video) is fitted inside its container by assigning the `object-fit` property to the element itself:
+
+```css
+.img {
+  object-fit: cover;
+}
+```
+and the even reposition it thanks to the `object-position` property!
+
+Supported values are :
+* `cover` fills image into the parent element so it's fully covered and contains aspect-ratio.
+* `contain` fills image into the parent element so the object is fully shown.
+* `fill` fills image into the parent element so it's fully covered and shrinks image, not respecting aspect-ratio.
+
+Beware of [browser compatibility](http://caniuse.com/#search=object-position), this one is tricky: only Firefox and Chrome have native support!
+
 ## Support
 
 Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.