{"id":179,"date":"2015-04-07T20:29:24","date_gmt":"2015-04-07T20:29:24","guid":{"rendered":"https:\/\/www.tech.shinynewthings.com\/?p=179"},"modified":"2015-04-07T20:34:33","modified_gmt":"2015-04-07T20:34:33","slug":"image-aspect-ratio-css-object-fit-object-fit","status":"publish","type":"post","link":"https:\/\/www.tech.shinynewthings.com\/?p=179","title":{"rendered":"Image Aspect Ratio &#8211; CSS Object Fit \/ object-fit"},"content":{"rendered":"<p>Hell Yes!<\/p>\n<p>Displaying images in a container div while respecting aspect ratio has always felt cumbersome. But, it looks like all of the past solutions are now giving way to object-fit. I&#8217;d seen this tag in the but the lack of cross browser support made it unusable prior to the addition of support by Firefox 36 and Safari 8 (and the announcement that IE is being discontinued).<\/p>\n<p>A quick intro.<\/p>\n<p>Note *object-fit requires that the img tag or containing element be given a width and height.<\/p>\n<p>object-fit values.<\/p>\n<pre>fill : stretches the image to the requested height \/ width.\n\ncontain : retains aspect ratio using max width or height to calculate the ratio for the other side.\n\ncover : fills the box using max width or height, allowing overflow.\n\nscale-down : uses none or contain defaulting to which ever displays the image first.\n\nnone : if the original image fits, it is displayed\n<\/pre>\n<p>Example CSS:<\/p>\n<pre><code>img {\n    width: 300px;\n    height: 300px;\n    object-fit: contain;\n}\n<\/code><\/pre>\n<p>Example on <a href='http:\/\/codepen.io\/robinrendle\/pen\/BywNVX?editors=110'>CodePen<\/a><\/p>\n<p>Again, object-fit is not supported by IE, but a <a href=\"https:\/\/github.com\/anselmh\/object-fit\">polyfill<\/a> is available and IE is on it&#8217;s way out.<\/p>\n<p>Read <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/object-fit\">MDN Object fit<\/a> for more concise info.<\/p>\n<p>And check <a href=\"http:\/\/caniuse.com\/#feat=object-fit\">caniuse.com<\/a> for up to date browser support.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hell Yes! Displaying images in a container div while respecting aspect ratio has always felt cumbersome. But, it looks like all of the past solutions are now giving way to object-fit. I&#8217;d seen this tag in the but the lack of cross browser support made it unusable prior to the addition of support by Firefox [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-179","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=179"}],"version-history":[{"count":7,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/179\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/179\/revisions\/186"}],"wp:attachment":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}