{"id":34060,"date":"2017-10-31T03:01:59","date_gmt":"2017-10-30T17:01:59","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34060"},"modified":"2017-10-30T19:09:10","modified_gmt":"2017-10-30T09:09:10","slug":"css3-object-fit-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-object-fit-primer-tutorial\/","title":{"rendered":"CSS3 Object Fit Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/object_fit.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Object Fit Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/object_fit.jpg\" title=\"CSS3 Object Fit Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Object Fit Primer Tutorial<\/p><\/div>\n<p>The recent <a title='CSS3 Background Size Contain and Cover Primer Tutorial' href='#css3bsccpt'>CSS3 Background Size Contain and Cover Primer Tutorial<\/a> was an epiphany for us regarding two very useful &#8230;<\/p>\n<ul>\n<li>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'><p>The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.<\/p><\/blockquote>\n<li>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'><p>The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p> &#8230; concepts regarding web application background images and specifically the associated <a target=_blank title='CSS Background Size property information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'>Background Size<\/a> property.  But what if we extend that thinking to &#8230;<\/p>\n<ul>\n<li>image <a target=_blank title='HTML img tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_img.asp'><i>img<\/i><\/a> HTML tag<\/li>\n<li><a target=_blank href='https:\/\/www.w3schools.com\/html\/html5_video.asp' title='HTML video element information from w3schools'><i>video<\/i><\/a> HTML tag<\/li>\n<\/ul>\n<p> &#8230; relationships to some HTML element tags that nest them (today into some HTML table td (cell) elements whose dimensions are calculated via the ever popular window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> Javascript functionality), in CSS3 &#8220;talk&#8221;, the new(ish) <a target=_blank title='https:\/\/www.w3schools.com\/css\/css3_object-fit.asp' href='https:\/\/www.w3schools.com\/css\/css3_object-fit.asp'><i>object-fit<\/i><\/a> property applicable to those two HTML element types above.<\/p>\n<p>It&#8217;s not just <i>cover<\/i> and <i>contain<\/i> property values at play with the <i>object-fit<\/i> property, it&#8217;s &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_object-fit.asp'><p>\n    fill &#8211; This is default. The replaced content is sized to fill the element&#8217;s content box. If necessary, the object will be stretched or squished to fit<br \/>\n    contain &#8211; The replaced content is scaled to maintain its aspect ratio while fitting within the element&#8217;s content box<br \/>\n    cover &#8211; The replaced content is sized to maintain its aspect ratio while filling the element&#8217;s entire content box. The object will be clipped to fit<br \/>\n    none &#8211; The replaced content is not resized<br \/>\n    scale-down &#8211; The content is sized as if none or contain were specified (would result in a smaller concrete object size)\n<\/p><\/blockquote>\n<p>In this line of thinking we&#8217;ve mocked up a proof of concept web application for you to play around with these ideas yourself at today&#8217;s HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/object_fit.html_GETME\" title=\"object_fit.html\">object_fit.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/object_fit.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<hr>\n<p id='css3bsccpt'>Previous relevant <a target=_blank title='CSS3 Background Size Contain and Cover Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-background-size-contain-and-cover-primer-tutorial\/'>CSS3 Background Size Contain and Cover Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bs_contain_cover.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Background Size Contain and Cover Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bs_contain_cover.jpg\" title=\"CSS3 Background Size Contain and Cover Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Background Size Contain and Cover Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a fairly simple but fairly useful lesson today with respect to a CSS styling improvement introduced with CSS3, the <a target=_blank title='CSS Background Size property information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'>Background Size<\/a> property that allows you to specify the size of background images.<\/p>\n<p>How often have you mismatched (the size of) a background image to the contents it is backgrounded against, and involved the <a target=_blank title='CSS Background-repeat property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_background-repeat.asp'>background-repeat<\/a> property, much to your chagrin, perhaps?<\/p>\n<p>You can try this simple illustration of two useful <i>background-size<\/i> values, namely &#8230;<\/p>\n<ul>\n<li>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'><p>The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.<\/p><\/blockquote>\n<li>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'><p>The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p> &#8230; at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bs_contain_cover.html\" title=\"Click picture\">live run<\/a> link with its underlying serverside HTML and CSS code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bs_contain_cover.html_GETME\" title=\"\/HTMLCSS\/bs_contain_cover.html\">bs_contain_cover.html<\/a> as you wish.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d33845' onclick='var dv=document.getElementById(\"d33845\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css3\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33845' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34060' onclick='var dv=document.getElementById(\"d34060\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34060' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent CSS3 Background Size Contain and Cover Primer Tutorial was an epiphany for us regarding two very useful &#8230; The contain keyword scales the background image to be as large as possible (but both its width and its height &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-object-fit-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[1580,281,282,1801,2258,576,590,599,2381,997,1238,1319,1369,2257,1827],"class_list":["post-34060","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-cell","tag-css","tag-css3","tag-getcomputedstyle","tag-height","tag-html","tag-image","tag-img","tag-object-fit","tag-programming","tag-table","tag-tutorial","tag-video","tag-width","tag-window-getcomputedstyle"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34060"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=34060"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34060\/revisions"}],"predecessor-version":[{"id":34062,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34060\/revisions\/34062"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}