{"id":55687,"date":"2022-05-12T03:01:13","date_gmt":"2022-05-11T17:01:13","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55687"},"modified":"2022-05-12T07:55:21","modified_gmt":"2022-05-11T21:55:21","slug":"image-pair-fitting-into-a-given-dimension-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-primer-tutorial\/","title":{"rendered":"Image Pair Fitting into a Given Dimension Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Pair Fitting into a Given Dimension Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.jpg\" title=\"Image Pair Fitting into a Given Dimension Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Image Pair Fitting into a Given Dimension Primer Tutorial<\/p><\/div>\n<p>One of the most &#8220;catered for&#8221; part of webpage design involves the display of images.  Our recent &#8220;stumbling upon&#8221; &#8230;<\/p>\n<ul>\n<li>the excellent <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos'>Lorem Picsum<\/a> resource for beautiful images suiting a given width x height &#8230; had us looking around for an interesting image related theme to &#8220;tutorialize&#8221; and &#8220;stumbled upon&#8221; &#8230;<\/li>\n<li>the excellent <a target=_blank title='CSS object-fit Property' href='https:\/\/www.w3schools.com\/css\/css3_object-fit.asp'>CSS object-fit Property<\/a> explanation of CSS &#8220;object-fit&#8221; property &#8230;<\/li>\n<\/ul>\n<p> &#8230; facilitating the interest in the scenario &#8230;<\/p>\n<ul>\n<li>you are presented with &#8220;webpage real estate&#8221; of a given width x height &#8230; into which &#8230;<\/li>\n<li>you want to display two images side by side &#8230;<\/li>\n<\/ul>\n<p> &#8230; and in this scenario the use of &#8220;object-fit&#8221; property values &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_object-fit.asp'><p>\nHere is where the object-fit property comes in. The object-fit property can take one of the following values:<br \/>\n<br \/>\nfill &#8211; This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit<br \/>\ncontain &#8211; The image keeps its aspect ratio, but is resized to fit within the given dimension<br \/>\ncover &#8211; The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit<br \/>\nnone &#8211; The image is not resized<br \/>\nscale-down &#8211; the image is scaled down to the smallest version of none or contain\n<\/p><\/blockquote>\n<p> &#8230; creates interesting variety in how you can configure this scenario depending on your (constraint) interest in &#8230;<\/p>\n<ul>\n<li>you are constrained by fact you must see all the image&#8217;s content in original <a target=_blank title='Aspect ratio information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Aspect_ratio_(image)'>aspect ratio<\/a> &#8230; think &#8230; contain or scale-down<\/li>\n<li>you are constrained by fact you must see all the image&#8217;s content but not necessarily with original aspect ratio &#8230; think &#8230; fill or contain or scale-down<\/li>\n<li>you are constrained by fact that your &#8220;webpage real estate&#8221; of the given width x height must be filled (by image<font size=1>ry<\/font>) &#8230; think &#8230; fill or cover (or <font size=1>(quite often, but not always)<\/font> none)<\/li>\n<li>you must keep original image dimensions but clipping okay &#8230; think &#8230; none<\/li>\n<li>you must keep original aspect ratio of images but clipping okay &#8230; think &#8230; contain or cover or none or scale-down<\/li>\n<\/ul>\n<p> &#8230; and then there is &#8230;<\/p>\n<blockquote><p>\nWhat happens when you resize your webpage window?\n<\/p><\/blockquote>\n<p>Feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.html_GETME\">proof of concept<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.html\">CSS (styling) &#8220;object-fit&#8221; experimenting web application<\/a> &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.html\" style=\"width:100%;height:800px;\"><\/iframe><\/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='#d55687' onclick='var dv=document.getElementById(\"d55687\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/resize\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55687' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>One of the most &#8220;catered for&#8221; part of webpage design involves the display of images. Our recent &#8220;stumbling upon&#8221; &#8230; the excellent Lorem Picsum resource for beautiful images suiting a given width x height &#8230; had us looking around for &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-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,30,37],"tags":[3293,2370,2369,281,2507,3330,446,2258,576,590,2910,1738,929,997,1059,3974,1319,2257],"class_list":["post-55687","post","type-post","status-publish","format-standard","hentry","category-elearning","category-photography","category-tutorials","tag-aspect-ratio","tag-contain","tag-cover","tag-css","tag-dimension","tag-fill","tag-float","tag-height","tag-html","tag-image","tag-pair","tag-photo","tag-photograph","tag-programming","tag-resize","tag-scale-down","tag-tutorial","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55687"}],"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=55687"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55687\/revisions"}],"predecessor-version":[{"id":55728,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55687\/revisions\/55728"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}