{
  "$type": "site.standard.document",
  "canonicalUrl": "https://mhartington.io/post/object-fit",
  "path": "/post/object-fit",
  "publishedAt": "2016-01-15T04:54:55.000Z",
  "site": "at://did:plc:7kwylbxx56yro6aqz3oh5d2s/site.standard.publication/3mpgyj6haew2g",
  "textContent": "Today I was watching a random video on ES6 tooling when I saw the author use a CSS property I'd never heard of. object-fit, and it was pretty awesome.\n\n>Method of specifying how an object (image or video) should fit inside its box. object-fit options include \"contain\" (fit according to aspect ratio), \"fill\" (stretches object to fill) and \"cover\" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.\n\n_Or_ It's similar to CSS background-size, where you can adjust how an image scales as you resize the page.\n\nThis is something I'd never even heard of before, so I decided to give it a test.\nNow according to Can I Use, object-fit is supported on modern Firefox, Chrome, and has partial support on Safari. The partial support on Safari is due to it not supported object-position.\n\nDemo\n\nNow the demo is pretty simple. I create a list of images and size them up to 50% of the viewport's width and height.\n\nThere's some Angular behind there to just ease the process of creating all the images. The real magic comes from the CSS\n\nobject-fit: cover will size the image so that no matter what the dimensions are, the images aspect ratio will always be preserved.\n\nThis makes creating something like an image gallery so much easier since you don't have to worry about the images dimensions. You can just use object-fit and know everything will be work.\n\n<p data-height=\"268\" data-theme-id=\"0\" data-slug-hash=\"xZXGGX\" data-default-tab=\"result\" data-user=\"mhartington\" class='codepen'>See the Pen <a href='http://codepen.io/mhartington/pen/xZXGGX/'>Object-fit</a> by Mike Hartington (<a href='http://codepen.io/mhartington'>@mhartington</a>) on <a href='http://codepen.io'>CodePen</a>.</p>\n<script async src=\"//assets.codepen.io/assets/embed/ei.js\"></script>",
  "title": "Object Fit"
}