{"id":55811,"date":"2022-10-11T03:01:05","date_gmt":"2022-10-10T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55811"},"modified":"2022-10-03T11:52:26","modified_gmt":"2022-10-03T01:52:26","slug":"image-pair-fitting-into-a-given-dimension-refresh-hashtag-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-refresh-hashtag-tutorial\/","title":{"rendered":"Image Pair Fitting into a Given Dimension Refresh Hashtag 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.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Pair Fitting into a Given Dimension Refresh Hashtag Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension_refresh_hashtag.jpg\" title=\"Image Pair Fitting into a Given Dimension Refresh Hashtag Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Image Pair Fitting into a Given Dimension Refresh Hashtag Tutorial<\/p><\/div>\n<p>There are many many approaches where one webpage navigating to another can share data.  Think, listing just a few &#8230;<\/p>\n<ul>\n<li>URL &#8220;get&#8221; ? and &#038; arguments &#8230; on client side or server side &#8230;<\/li>\n<li>Ajax or HTML form (method=) &#8220;post&#8221; data &#8230; if you have access to server side PHP (as one language example) &#8230;<\/li>\n<li>HTTP Cookies &#8230; client or server &#8230;<\/li>\n<li>window.localStorage or window.sessionStorage &#8230; client or server &#8230;<\/li>\n<li>overlayed HTML iframe on top of its parent &#8230; client or server &#8230;<\/li>\n<li>fixed ascii file &#8230; server &#8230;<\/li>\n<li>database &#8230; server &#8230; <b>and then there&#8217;s today&#8217;s idea<\/b> &#8230;<\/li>\n<li>hashtag &#8230; location.hash &#8230; client<\/li>\n<\/ul>\n<p> &#8230; as a really simple enhancement method as a way to improve on yesterday&#8217;s <a title='Image Pair Fitting into a Given Dimension Refresh Tutorial' href='#ipfgdrt'>Image Pair Fitting into a Given Dimension Refresh Tutorial<\/a>, to share the &#8220;refresh&#8221; settings when toggling between &#8230;<\/p>\n<ul>\n<li>as well as the wonderful <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos'>Lorem Picsum<\/a> resource for beautiful images &#8220;source&#8221; &#8230; we might add &#8230;<\/li>\n<li>new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/\">RJM Programming WordPress Blog<\/a> <font size=1>(that you are probably reading from, now)<\/font> tutorial picture &#8220;source&#8221; of images<\/li>\n<\/ul>\n<p> &#8230; modes of use in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.html----GETME\">the changed<\/a> <font size=1>(are we there yet, now, Mum)<\/font> <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.htm\">CSS (styling) &#8220;object-fit&#8221; experimenting web application<\/a> &#8230; <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n  var animatechar='-';<br \/>\n  var animatesettled=false;<br \/>\n  var animateinterval=-1;<br \/>\n  var animsi=null;<br \/>\n  var animsitwo=null;<br \/>\n  <font color=blue>var lh='';<br \/>\n  var lhvialh=('' + location.hash);<\/font><br \/>\n <br \/> <br \/>\n function dorjm() {<br \/>\n   location.href=document.URL.split('#')[0].split('?')[0] + '?prefix=' + encodeURIComponent('\/\/www.rjmprogramming.com.au\/ITblog\/') + onemustcontain<font color=blue> + lh<\/font>;<br \/>\n }<br \/>\n <br \/> <br \/>\n function undorjm() {<br \/>\n   location.href=document.URL.split('#')[0].split('?')[0]<font color=blue> + lh<\/font>;<br \/>\n }<br \/>\n <br \/> <br \/>\n function animeter(insecs) {<br \/>\n   if (document.getElementById('secs')) {<br \/>\n   if (!document.getElementById('aprog')) {<br \/>\n   \/\/document.getElementById('secs').innerHTML='&amp;nbsp;&lt;label id=lprog for=\"aprog\"&gt;' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 \/ animateinterval) + '%)&lt;\/label&gt;&lt;progress title=\"' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 \/ animateinterval) + '%)\" id=\"aprog\" value=\"' + insecs + '\" max=\"' + animateinterval + '\"&gt;&lt;\/progress&gt;&amp;nbsp;';<br \/>\n   document.getElementById('secs').innerHTML='&amp;nbsp;&lt;progress onclick=\"document.getElementById(' + \"'\" + 'lprog' + \"'\" + ').style.display=' + \"'\" + 'inline' + \"'\" + '; lh=lh.split(' + \"'.'\" + ')[0] + ' + \"'\" + '.0' + \"'\" + ';\" style=display:inline; title=\"' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 \/ animateinterval) + '%)\" id=\"aprog\" onclick=\"document.getElementById(' + \"'\" + 'lprog' + \"'\" + ').style.display=' + \"'\" + 'inline' + \"'\" + '; lh=lh.split(' + \"'.'\" + ')[0] + ' + \"'\" + '.0' + \"'\" + ';\" value=\"' + insecs + '\" max=\"' + animateinterval + '\"&gt;&lt;\/progress&gt;&amp;nbsp;&lt;label style=display:none; id=lprog for=\"aprog\"&gt;' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 \/ animateinterval)).substring(0,6) + '%)&lt;\/label&gt;';<br \/>\n   <font color=blue>if (lhvialh == ' ') {<br \/>\n     document.getElementById('aprog').click();<br \/>\n     lhvialh='';<br \/>\n   }<\/font><br \/>\n   } else {<br \/>\n   document.getElementById('aprog').value='' + insecs;<br \/>\n   document.getElementById('aprog').title='' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 \/ animateinterval) + '%)';<br \/>\n   if (document.getElementById('lprog')) {<br \/>\n   document.getElementById('lprog').title='' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 \/ animateinterval)).substring(0,6) + '%)';<br \/>\n   document.getElementById('lprog').innerHTML='' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 \/ animateinterval)).substring(0,6) + '%)';<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n }<br \/>\n <br \/> <br \/>\n function animsecs() {<br \/>\n   if (document.getElementById('secs')) {<br \/>\n    if (document.getElementById('secs').innerHTML.trim() != '') {<br \/>\n      \/\/setTimeout(animsecs, 1000);<br \/>\n      var isecs=animateinterval;<br \/>\n      if (document.getElementById('aprog')) {<br \/>\n      isecs=eval('' + document.getElementById('aprog').value);<br \/>\n      }<br \/>\n      isecs--;<br \/>\n      if (('' + isecs).indexOf('-') != -1) {<br \/>\n        animeter(animateinterval);<br \/>\n      } else {<br \/>\n        animeter(isecs);<br \/>\n      }<br \/>\n    }<br \/>\n   }<br \/>\n }<br \/>\n <br \/> <br \/>\n function animateask() {<br \/>\n   if (animsitwo) {<br \/>\n       clearInterval(animsitwo);<br \/>\n   }<br \/>\n   if (animsi) {<br \/>\n       clearInterval(animsi);<br \/>\n   }<br \/>\n   <font color=blue>if (lhvialh.replace('#','').replace('animateinterval','').trim() != '') {<br \/>\n     animateinterval=lhvialh.replace('#','').replace('animateinterval','').split('.')[0];<br \/>\n     if (lhvialh.indexOf('.0') != -1) {<br \/>\n      lhvialh=' ';<br \/>\n     } else {<br \/>\n      lhvialh='';<br \/>\n     }<br \/>\n   } else {<\/font><br \/>\n     animateinterval=prompt('Enter photograph refresh interval in seconds.', '15');<br \/>\n   <font color=blue>}<\/font><br \/>\n   if (animateinterval == null) {<br \/>\n     <font color=blue>lh='';<\/font><br \/>\n     animateinterval=-1;<br \/>\n     animatesettled=false;<br \/>\n     document.getElementById('secs').innerHTML='';<br \/>\n     document.getElementById('animate').style.backgroundColor='yellow';<br \/>\n   } else if (('' + animateinterval).indexOf('-') == -1 && ('' + animateinterval).trim() != '' && ('' + animateinterval + ' ').substring(0,1) &gt;= '1' && ('' + animateinterval + ' ').substring(0,1) &lt;= '9') {<br \/>\n     animateinterval=('' + animateinterval).split('.')[0];<br \/>\n     <font color=blue>lh='#animateinterval' + animateinterval;<\/font><br \/>\n     animatesettled=true;<br \/>\n     animatechar='-';<br \/>\n     document.getElementById('secs').innerHTML='';<br \/>\n     animeter(animateinterval);<br \/>\n     animsitwo=setInterval(animsecs, 1000);<br \/>\n     document.getElementById('animate').style.backgroundColor='lightgreen';<br \/>\n     \/\/alert(eval(1000 * eval('' + ('' + animateinterval))));<br \/>\n     animsi=setInterval(animnow, eval(1000 * eval('' + ('' + animateinterval))));<br \/>\n   } else {<br \/>\n     <font color=blue>lh='';<\/font><br \/>\n     animateinterval=-1;<br \/>\n     animatesettled=false;<br \/>\n     document.getElementById('secs').innerHTML='';<br \/>\n     document.getElementById('animate').style.backgroundColor='yellow';<br \/>\n   }<br \/>\n }<br \/>\n <br \/> <br \/>\n function animminus() {<br \/>\n   if (animatesettled) {<br \/>\n     animatechar='-';<br \/>\n   } else {<br \/>\n   if (animatechar == '-') {<br \/>\n     animatechar='|';<br \/>\n   } else { \/\/if (animatechar == ' | ') {<br \/>\n     animatechar='-';<br \/>\n   }<br \/>\n   }<br \/>\n   document.getElementById('animate').innerHTML=animatechar;<br \/>\n   console.log(document.getElementById('animate').getBoundingClientRect().width);<br \/>\n }<br \/>\n <br \/> <br \/>\n function animnow() {<br \/>\n   if (animatesettled) {<br \/>\n     fourhundred='-' + ('' + fourhundred).replace('-','');<br \/>\n     isecs=1;<br \/>\n     animeter(isecs);<br \/>\n     changeh(document.getElementById('dh'));<br \/>\n   } else {<br \/>\n     animatechar='-';<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-refresh-hashtag-tutorial\/'>Image Pair Fitting into a Given Dimension Refresh Hashtag Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ipfgdrt'>Previous relevant <a target=_blank title='Image Pair Fitting into a Given Dimension Refresh Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-refresh-tutorial\/'>Image Pair Fitting into a Given Dimension Refresh 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\/images_fitting_a_given_dimension.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Pair Fitting into a Given Dimension Refresh Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension_refresh.jpg\" title=\"Image Pair Fitting into a Given Dimension Refresh Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Image Pair Fitting into a Given Dimension Refresh Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Image Pair Fitting into a Given Dimension Sources Tutorial' href='#ipfgdst'>Image Pair Fitting into a Given Dimension Sources Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>adding of an alternative image source &#8230; added a bit of &#8220;pizazz&#8221; &#8230; and adding to the &#8220;Margherita push&#8221;, today, is to &#8230;<\/li>\n<li>add the opportunity for a user to add an image refresh rate (in seconds)<\/li>\n<\/ul>\n<p> &#8230; to add a dynamic animation feel.<\/p>\n<p>In order to make this happen there were HTML changes <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;body onload=\"premcbit(); setTimeout(mcbit, 1000); setTimeout(refit,2000); <font color=blue>setInterval(animminus, 1000);<\/font>\"&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and &#8230;<\/p>\n<p><code><br \/>\n&lt;h2&gt;RJM Programming <font color=blue>&lt;span title=\"Can set a photograph refresh interval in seconds with a click here.\" style=\"font-family:courier, courier new, serif;cursor:pointer;text-decoration:none;background-color:yellow;\" id=animate onclick=animateask();&gt;<\/font>-<font color=blue>&lt;\/span&gt;&lt;sup id=secs title='Refresh interval in seconds'&gt;&lt;\/sup&gt;<\/font> May, 2022&lt;\/h2&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; combining with Javascript (DOM) changes <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>  var animatechar='-';<br \/>\n  var animatesettled=false;<br \/>\n  var animateinterval=-1;<br \/>\n  var animsi=null;<br \/>\n  var animsitwo=null;<\/font><br \/>\n<br \/>\n  function changeh(osis) {<br \/>\n    <font color=blue>var suffc='';<br \/>\n    var ofour=fourhundred;<\/font><br \/>\n    var tdrecthpx=osis.innerHTML;<br \/>\n    document.getElementById('dh').innerHTML='' + tdrecthpx;<br \/>\n    document.getElementById('dcontainer').style.height='' + tdrecthpx;<br \/>\n    if (('' + tdrecthpx) != ('' + fourhundred + 'px')) {<br \/>\n      <font color=blue>if (('' + ofour).indexOf('-') != -1) {  suffc='&another=' + Math.floor(Math.random() * 19876564); }<\/font><br \/>\n      document.getElementById('ileft').src=document.getElementById('ileft').src.replace('\/' + sixhundred + '\/' + fourhundred<font color=blue>.replace('-','')<\/font> + '', '\/' + sixhundred + '\/' + tdrecthpx.replace('px','') + '')<font color=blue> + suffc<\/font>;<br \/>\n      document.getElementById('iright').src=document.getElementById('iright').src.replace('\/' + sixhundred + '\/' + fourhundred<font color=blue>.replace('-','')<\/font> + '', '\/' + sixhundred + '\/' + tdrecthpx.replace('px','') + '')<font color=blue> + suffc<\/font>;<br \/>\n      fourhundred=('' + tdrecthpx.replace('px',''));<br \/>\n  if (prefix != '\/\/picsum.photos\/') {<br \/>\n    document.getElementById('ifleft').src=prefix + sixhundred + '\/' + fourhundred<font color=blue>.replace('-','')<\/font> + '?random=' + Math.floor(Math.random() * 198765643) + onemustcontain;<br \/>\n    document.getElementById('ifright').src=prefix + sixhundred + '\/' + fourhundred<font color=blue>.replace('-','')<\/font> + '?random=' + Math.floor(Math.random() * 198765643) + onemustcontain;<br \/>\n  }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n <font color=blue>function animeter(insecs) {<br \/>\n   if (document.getElementById('secs')) {<br \/>\n   if (!document.getElementById('aprog')) {<br \/>\n   \/\/document.getElementById('secs').innerHTML='&nbsp;&lt;label id=lprog for=\"aprog\"&gt;' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 \/ animateinterval) + '%)&lt;\/label&gt;&lt;progress title=\"' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 \/ animateinterval) + '%)\" id=\"aprog\" value=\"' + insecs + '\" max=\"' + animateinterval + '\"&gt;&lt;\/progress&gt;&nbsp;';<br \/>\n   document.getElementById('secs').innerHTML='&nbsp;&lt;progress onclick=\"document.getElementById(' + \"'\" + 'lprog' + \"'\" + ').style.display=' + \"'\" + 'inline' + \"'\" + ';\" style=display:inline; title=\"' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 \/ animateinterval) + '%)\" id=\"aprog\" onclick=\"document.getElementById(' + \"'\" + 'lprog' + \"'\" + ').style.display=' + \"'\" + 'inline' + \"'\" + ';\" value=\"' + insecs + '\" max=\"' + animateinterval + '\"&gt;&lt;\/progress&gt;&nbsp;&lt;label style=display:none; id=lprog for=\"aprog\"&gt;' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 \/ animateinterval)).substring(0,6) + '%)&lt;\/label&gt;';<br \/>\n   } else {<br \/>\n   document.getElementById('aprog').value='' + insecs;<br \/>\n   document.getElementById('aprog').title='' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 \/ animateinterval) + '%)';<br \/>\n   if (document.getElementById('lprog')) {<br \/>\n   document.getElementById('lprog').title='' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 \/ animateinterval)).substring(0,6) + '%)';<br \/>\n   document.getElementById('lprog').innerHTML='' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 \/ animateinterval)).substring(0,6) + '%)';<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n }<br \/>\n<br \/> <br \/>\n function animsecs() {<br \/>\n   if (document.getElementById('secs')) {<br \/>\n    if (document.getElementById('secs').innerHTML.trim() != '') {<br \/>\n      \/\/setTimeout(animsecs, 1000);<br \/>\n      var isecs=animateinterval;<br \/>\n      if (document.getElementById('aprog')) {<br \/>\n      isecs=eval('' + document.getElementById('aprog').value);<br \/>\n      }<br \/>\n      isecs--;<br \/>\n      if (('' + isecs).indexOf('-') != -1) {<br \/>\n        animeter(animateinterval);<br \/>\n      } else {<br \/>\n        animeter(isecs);<br \/>\n      }<br \/>\n    }<br \/>\n   }<br \/>\n }<br \/>\n<br \/>\n function animateask() {<br \/>\n   if (animsitwo) {<br \/>\n       clearInterval(animsitwo);<br \/>\n   }<br \/>\n   if (animsi) {<br \/>\n       clearInterval(animsi);<br \/>\n   }<br \/>\n   animateinterval=prompt('Enter photograph refresh interval in seconds.', '15');<br \/>\n   if (animateinterval == null) {<br \/>\n     animateinterval=-1;<br \/>\n     animatesettled=false;<br \/>\n     document.getElementById('secs').innerHTML='';<br \/>\n     document.getElementById('animate').style.backgroundColor='yellow';<br \/>\n   } else if (('' + animateinterval).indexOf('-') == -1 && ('' + animateinterval).trim() != '' && ('' + animateinterval + ' ').substring(0,1) &gt;= '1' && ('' + animateinterval + ' ').substring(0,1) &lt;= '9') {<br \/>\n     animateinterval=('' + animateinterval).split('.')[0];<br \/>\n     animatesettled=true;<br \/>\n     animatechar='-';<br \/>\n     document.getElementById('secs').innerHTML='';<br \/>\n     animeter(animateinterval);<br \/>\n     animsitwo=setInterval(animsecs, 1000);<br \/>\n     document.getElementById('animate').style.backgroundColor='lightgreen';<br \/>\n     \/\/alert(eval(1000 * eval('' + ('' + animateinterval))));<br \/>\n     animsi=setInterval(animnow, eval(1000 * eval('' + ('' + animateinterval))));<br \/>\n   } else {<br \/>\n     animateinterval=-1;<br \/>\n     animatesettled=false;<br \/>\n     document.getElementById('secs').innerHTML='';<br \/>\n     document.getElementById('animate').style.backgroundColor='yellow';<br \/>\n   }<br \/>\n }<br \/>\n<br \/> <br \/>\n function animminus() {<br \/>\n   if (animatesettled) {<br \/>\n     animatechar='-';<br \/>\n   } else {<br \/>\n   if (animatechar == '-') {<br \/>\n     animatechar='|';<br \/>\n   } else { \/\/if (animatechar == '|') {<br \/>\n     animatechar='-';<br \/>\n   }<br \/>\n   }<br \/>\n   document.getElementById('animate').innerHTML=animatechar;<br \/>\n }<br \/>\n<br \/> <br \/>\n function animnow() {<br \/>\n   if (animatesettled) {<br \/>\n     fourhundred='-' + ('' + fourhundred).replace('-','');<br \/>\n     isecs=1;<br \/>\n     animeter(isecs);<br \/>\n     changeh(document.getElementById('dh'));<br \/>\n   } else {<br \/>\n     animatechar='-';<br \/>\n   }<br \/>\n }<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.html---GETME\">the changed<\/a> <font size=1>(are we there yet, Mum)<\/font> <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.htm\">CSS (styling) &#8220;object-fit&#8221; experimenting web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-image-pair-fitting-into-a-given-dimension-refresh-tutorial\/'>Image Pair Fitting into a Given Dimension Refresh Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ipfgdst'>Previous relevant <a target=_blank title='Image Pair Fitting into a Given Dimension Sources Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-sources-tutorial\/'>Image Pair Fitting into a Given Dimension Sources 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\/images_fitting_a_given_dimension.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Pair Fitting into a Given Dimension Sources Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension_rjm_source.jpg\" title=\"Image Pair Fitting into a Given Dimension Sources Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Image Pair Fitting into a Given Dimension Sources Tutorial<\/p><\/div>\n<p>Thinking &#8220;layers of functionality&#8221; here, we think that progress onto yesterday&#8217;s <a title='Image Pair Fitting into a Given Dimension Primer Tutorial' href='#ipfgdpt'>Image Pair Fitting into a Given Dimension Primer Tutorial<\/a> would go &#8230;<\/p>\n<ul>\n<li>as well as the wonderful <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos'>Lorem Picsum<\/a> resource for beautiful images &#8220;source&#8221; &#8230; we might add &#8230;<\/li>\n<li>new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/\">RJM Programming WordPress Blog<\/a> <font size=1>(that you are probably reading from, now)<\/font> tutorial picture &#8220;source&#8221; of images<\/li>\n<\/ul>\n<p> &#8230; the functionality for which we have been trying to envisage for many years, and seeing the excellent <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos'>Lorem Picsum<\/a> arrangements being a catalyst, to give it a go.<\/p>\n<p>Kludgy feeling or not, we are happy to be linking into the &#8220;last talked about&#8221; <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-search-within-search-posting-progress-context-tutorial\/' title='WordPress Blog Search Within Search Posting Progress Context Tutorial'>WordPress Blog Search Within Search Posting Progress Context Tutorial<\/a> WordPress &#8220;URL not found&#8221; 404.php code methodologies here, as a great &#8220;intervention point&#8221;.  We often find the biggest joy in web application code modifications is to identify &#8220;code lazy <font size=1>(for us)<\/font>&#8221; &#8220;intervention points&#8221; that mean most of the hard part of the job is done for you, by others (here, that being the great <a target=_blank title='WordPress blog' href='\/\/wordpress.org'>WordPress<\/a> TwentyTen theme <a target=_blank title='WordPress codex' href='https:\/\/codex.wordpress.org\/Main_Page'>&#8220;codex&#8221;<\/a> PHP code helped out by Apache web server <a target=_blank title='Apache .htaccess information' href='https:\/\/httpd.apache.org\/docs\/2.4\/howto\/htaccess.html'>.htaccess<\/a> permalink configurations) before you add your own &#8220;situation specific&#8221; interventional code.<\/p>\n<p>And so, once at 404.php code, we add new global variables and functions &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n\/\/ WordPress \"codex\" PHP comments precede<br \/>\n<br \/>\n$ioff=0;<br \/>\n$imfnameafterdomainsep=\"random_background_fadeinout.jpg\";<br \/>\n$ptitle=\"Random Background Webpage Fade Tutorial\";<br \/>\n$bonl=\"\";<br \/>\n$tonl=\"\";<br \/>\n<br \/>\nfunction selectNewBlogPostingTutorialPicture() {<br \/>\n  global $imfnameafterdomainsep, $ptitle, $bonl, $tonl;<br \/>\n  $foundipath=\"\";<br \/>\n  $icontis=file_get_contents(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . \"index.html\");<br \/>\n  $ideaarray=explode('&amp;pp=&amp;pn=&amp;title=', $icontis);<br \/>\n  if (sizeof($ideaarray) &gt; 1) {<br \/>\n    while ($foundipath == \"\") {<br \/>\n    $huhrand=rand(2, (-1 + sizeof($ideaarray)));<br \/>\n    $ptis=\"\";<br \/>\n    if (strpos(explode('&gt;', explode('\"', $ideaarray[$huhrand])[0])[0], \"Tutorial\") !== false) {<br \/>\n    $ptis=str_replace('_',' ',explode('Tutorial', explode('&gt;', explode('\"', $ideaarray[$huhrand])[0])[0])[0] . \"Tutorial\");<br \/>\n    }<br \/>\n    $tutdate=\"\";<br \/>\n    if (strpos($ideaarray[-1 + $huhrand], 'MyNew-') !== false) {<br \/>\n       $tdt=substr(explode('MyNew-', $ideaarray[-1 + $huhrand])[-1 + sizeof(explode('MyNew-', $ideaarray[-1 + $huhrand]))],0,8);<br \/>\n       $tutdate=' (' . substr($tdt,6,2) . ' ' . str_replace(\"01\",\"January\",str_replace(\"02\",\"February\",str_replace(\"03\",\"March\",str_replace(\"04\",\"April\",str_replace(\"05\",\"May\",str_replace(\"06\",\"June\",str_replace(\"07\",\"July\",str_replace(\"08\",\"August\",str_replace(\"09\",\"September\",str_replace(\"10\",\"October\",str_replace(\"11\",\"November\",str_replace(\"12\",\"December\",substr($tdt,4,2))))))))))))) . ' ' . substr($tdt,0,4) . ')';<br \/>\n    }<br \/>\n    $pnumis=explode('&', explode('?p=', $ideaarray[-1 + $huhrand]   )[-1 + sizeof(explode('?p=', $ideaarray[-1 + $huhrand]   ))])[0];<br \/>\n    $thisbpc=file_get_contents('HTTP:\/\/www.rjmprogramming.com.au\/ITblog\/?p=' . $pnumis);<br \/>\n    if (strpos($thisbpc, ' class=\"wp-caption') !== false) {<br \/>\n     $thatbpc=explode('\"', explode(' src=\"', explode(' class=\"wp-caption', $thisbpc)[1])[1])[0]; \/\/ www.rjmprogramming.com.au\/PHP\/emoji_animation_css_block.jpg<br \/>\n     if (strpos($thatbpc, \"rjmprogramming.com.au\/\") !== false) {<br \/>\n      if (strpos($thatbpc, \".jp\") !== false || strpos($thatbpc, \".png\") !== false || strpos($thatbpc, \".gif\") !== false) {<br \/>\n       if ($tutdate != \"\" && strpos($ptis, \" Tutorial\") !== false && strpos($ptis, \" (\") === false && strpos($ptis, \"%\") === false && strpos($ptis, \"&\") === false && file_exists(explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] .   explode(\"rjmprogramming.com.au\/\", $thatbpc)[1]   )) {<br \/>\n        $ptis.=$tutdate;<br \/>\n        $foundipath=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] .   explode(\"rjmprogramming.com.au\/\", $thatbpc)[1];<br \/>\n        if ($foundipath != \"\") {<br \/>\n          $imfnameafterdomainsep=explode(\"rjmprogramming.com.au\/\", $thatbpc)[1];<br \/>\n          $ptitle=$ptis;<br \/>\n          $onlme=\"\";<br \/>\n          if (strpos(('' . $_SERVER['QUERY_STRING']), 'andclickme=') !== false) {<br \/>\n            $onlme=' onload=\" window.open(' . \"'\/\/www.rjmprogramming.com.au\/ITblog\/?p=\" . $pnumis . \"','_blank','top=200,left=100,height=700,width=900'); \" . '\" ';<br \/>\n          }<br \/>\n          $bonl=$onlme . ' title=' . \"'\" . 'Click opens relevant blog post called ' . $ptis . ' and double click opens relevant blog post action item' . \"'\" . ' onclick=\" window.open(' . \"'\/\/www.rjmprogramming.com.au\/ITblog\/?p=\" . $pnumis . \"','_blank'); \" . '\" ondblclick=\" window.open(' . \"'\/\/www.rjmprogramming.com.au\/slideshow.html?title=\" . str_replace(urlencode('|'), '%20', urlencode(str_replace(' ','|',$ptis))) . \"','_blank'); \" . '\"';<br \/>\n          $tonl='&lt;head&gt;&lt;title&gt;' . $ptis . '&lt;\/title&gt;&lt;\/head&gt;';<br \/>\n        }<br \/>\n       }<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction createScaledImage($newWidth,$newHeight,$path,$datauri) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/16774521\/scale-image-using-php-and-maintaining-aspect-ratio' href='https:\/\/stackoverflow.com\/questions\/16774521\/scale-image-using-php-and-maintaining-aspect-ratio'>https:\/\/stackoverflow.com\/questions\/16774521\/scale-image-using-php-and-maintaining-aspect-ratio<\/a><br \/>\n<br \/>\n    $image_name=explode(DIRECTORY_SEPARATOR, $path)[-1 + sizeof(explode(DIRECTORY_SEPARATOR, $path))];<br \/>\n<br \/> <br \/>\n    $mime = getimagesize($path);<br \/>\n<br \/>\n    if ($mime['mime']=='image\/png') {<br \/>\n        $src_img = imagecreatefrompng($path);<br \/>\n    }<br \/>\n    if ($mime['mime']=='image\/jpg' || $mime['mime']=='image\/jpeg' || $mime['mime']=='image\/pjpeg') {<br \/>\n        $src_img = imagecreatefromjpeg($path);<br \/>\n    }<br \/>\n    if ($mime['mime']=='image\/gif') {<br \/>\n        $src_img = imagecreatefromgif($path);<br \/>\n    }<br \/>\n<br \/>\n    $old_x          =   imageSX($src_img);<br \/>\n    $old_y          =   imageSY($src_img);<br \/>\n<br \/>\n    if ($old_x &gt; $old_y) {<br \/>\n        $thumb_w    =   $newWidth;<br \/>\n        $thumb_h    =   $old_y\/$old_x*$newWidth;<br \/>\n    }<br \/>\n<br \/>\n    if ($old_x &lt; $old_y) {<br \/>\n        $thumb_w    =   $old_x\/$old_y*$newHeight;<br \/>\n        $thumb_h    =   $newHeight;<br \/>\n    }<br \/>\n<br \/>\n    if ($old_x == $old_y) {<br \/>\n        $thumb_w    =   $newWidth;<br \/>\n        $thumb_h    =   $newHeight;<br \/>\n    }<br \/>\n<br \/>\n    $dst_img        =   imagecreatetruecolor($thumb_w,$thumb_h);<br \/>\n<br \/>\n    imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);<br \/>\n<br \/>\n    \/\/ New save location<br \/>\n    $new_thumb_loc = '\/tmp\/' . $image_name;<br \/>\n<br \/>\n    if (!$datauri) {<br \/>\n    if($mime['mime']=='image\/png') {<br \/>\n      header('Content-Type: image\/png');<br \/>\n      imagepng($dst_img); \/\/,$new_thumb_loc,8);<br \/>\n    if (file_exists($new_thumb_loc)) {<br \/>\n    unlink($new_thumb_loc);<br \/>\n    }<br \/>\n    imagedestroy($dst_img);<br \/>\n    imagedestroy($src_img);<br \/>\n      exit;<br \/>\n    } else if ($mime['mime']=='image\/jpg' || $mime['mime']=='image\/jpeg' || $mime['mime']=='image\/pjpeg') {<br \/>\n      header('Content-Type: image\/jpeg');<br \/>\n      imagejpeg($dst_img); \/\/,$new_thumb_loc,80);<br \/>\n    if (file_exists($new_thumb_loc)) {<br \/>\n    unlink($new_thumb_loc);<br \/>\n    }<br \/>\n    imagedestroy($dst_img);<br \/>\n    imagedestroy($src_img);<br \/>\n      exit;<br \/>\n    } else if ($mime['mime']=='image\/gif') {<br \/>\n      header('Content-Type: image\/gif');<br \/>\n      imagejpeg($dst_img); \/\/,$new_thumb_loc,80);<br \/>\n    if (file_exists($new_thumb_loc)) {<br \/>\n    unlink($new_thumb_loc);<br \/>\n    }<br \/>\n    imagedestroy($dst_img);<br \/>\n    imagedestroy($src_img);<br \/>\n      exit;<br \/>\n    }<br \/>\n    exit;<br \/>\n    }<br \/>\n<br \/>\n    $result=\"\";<br \/>\n    if ($mime['mime']=='image\/png') {<br \/>\n        imagepng($dst_img,$new_thumb_loc,8);<br \/>\n        $result = file_get_contents($new_thumb_loc);<br \/>\n    }<br \/>\n    if ($mime['mime']=='image\/jpg' || $mime['mime']=='image\/jpeg' || $mime['mime']=='image\/pjpeg') {<br \/>\n        imagejpeg($dst_img,$new_thumb_loc,80);<br \/>\n        $result = file_get_contents($new_thumb_loc);<br \/>\n    }<br \/>\n    if ($mime['mime']=='image\/gif') {<br \/>\n        imagegif($dst_img,$new_thumb_loc);<br \/>\n        $result = file_get_contents($new_thumb_loc);<br \/>\n    }<br \/>\n<br \/>\n    imagedestroy($dst_img);<br \/>\n    imagedestroy($src_img);<br \/>\n<br \/> <br \/>\n    if (file_exists($new_thumb_loc)) {<br \/>\n    unlink($new_thumb_loc);<br \/>\n    }<br \/>\n<br \/>\n    return $result;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; called within <font color=blue>&#8220;new if section URL analysis code&#8221;<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$uparts=explode(\"\/\", $_SERVER['REQUEST_URI']);<br \/>\nif (sizeof($uparts) >= 2) {<br \/>\n  <font color=blue>if (trim(explode('#',explode('?',$uparts[-1 + sizeof($uparts)])[0])[0]) == '') {<br \/>\n    $ioff=-1;<br \/>\n  }<\/font><br \/>\n  if (1 == 1 || ('' . $_SERVER['QUERY_STRING']) == '') {<br \/>\n    $usz=sizeof($uparts);<br \/>\n    if (str_replace('?' . $_SERVER['QUERY_STRING'],'',trim($uparts[-1 + sizeof($uparts)])) == '') { $usz--; }<br \/>\n    if ($usz == 3 && strpos($uparts[-1 + $usz], \"%20\") !== false || strpos($uparts[-1 + $usz], \"+\") !== false) { \/\/ fix \/ITblog\/Linux%20mailx%20Primer%20Tutorial\/ 18\/1\/2022 RM<br \/>\n     if (('' . $_SERVER['QUERY_STRING']) == '') {<br \/>\n       header('Location: ' . str_replace('~``','\/ITblog\/',str_replace('\/','',str_replace('\/ITBLOG\/','~``',str_replace('\/itblog\/','~``',str_replace('\/ITblog\/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))));<br \/>\n     } else {<br \/>\n       header('Location: ' . explode('?',str_replace('~``','\/ITblog\/',str_replace('\/','',str_replace('\/ITBLOG\/','~``',str_replace('\/itblog\/','~``',str_replace('\/ITblog\/','~``',str_replace('--','-',str_replace('---','-',str_replace('+','-',str_replace('%20','-',$_SERVER['REQUEST_URI']))))))))))[0] . '?' . $_SERVER['QUERY_STRING']);<br \/>\n     }<br \/>\n     exit;<br \/>\n    }<br \/>\n  }<br \/>\n  if (str_replace(\"category\",\"cat\",strtolower($uparts[-2 + sizeof($uparts)])) == \"cat\" || strtolower($uparts[-2 + sizeof($uparts)]) == \"category\") {<br \/>\n    $catsare=[\"\",\"Not Categorised\",\"Ajax\",\"Android\",\"Animation\",\"Anything You Like\",\"Code::Blocks\",\"Colour Matching\",\"Data Integration\",\"Database\",\"Delphi\",\"Eclipse\",\"eLearning\",\"ESL\",\"Event-Driven Programming\",\"Games\",\"GIMP\",\"GUI\",\"Hradware\",\"Installers\",\"iOS\",\"Land Surveying\",\"Moodle\",\"Music Poll\",\"NetBeans\",\"Networking\",\"News\",\"ontop\",\"OOP\",\"Operating System\",\"Photography\",\"Projects\",\"Signage Poll\",\"Software\",\"SpectroPhotometer\",\"Tiki Wiki\",\"Trips\",\"Tutorials\",\"Uncategorized\",\"Visual Studio\",\"Xcode\"];<br \/>\n    for ($ibh=1; $ibh&lt;sizeof($catsare); $ibh++) {<br \/>\n      if (explode(\"&\",strtolower($uparts[-1 + sizeof($uparts)]))[0] == strtolower($catsare[$ibh])) {<br \/>\n        if (strtolower($catsare[$ibh]) == \"ontop\") {<br \/>\n          header('Location: https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/' . str_replace(\" \",\"-\",explode(\"&\",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;<br \/>\n        } else {<br \/>\n          header('Location: https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/' . str_replace(\" \",\"-\",explode(\"&\",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;<br \/>\n        }<br \/>\n      } else if (explode(\"&\",strtolower($uparts[-1 + sizeof($uparts)]))[0] == ('' . $ibh)) {<br \/>\n        if (strtolower($catsare[$ibh]) == \"ontop\") {<br \/>\n          header('Location: https:\/\/www.rjmprogramming.com.au\/ITblog\/?cat=' . str_replace(\" \",\"-\",explode(\"&\",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;<br \/>\n        } else {<br \/>\n          header('Location: https:\/\/www.rjmprogramming.com.au\/ITblog\/?cat=' . str_replace(\" \",\"-\",explode(\"&\",strtolower($uparts[-1 + sizeof($uparts)]))[0])) . '#' . $ibh;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  } <font color=blue>else if (substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) &gt;= '0' && substr(trim($uparts[$ioff - 1 + sizeof($uparts)]) . ' ',0,1) &lt;= '9') {<br \/>\n    if (substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) &gt;= '0' && substr(trim($uparts[$ioff - 2 + sizeof($uparts)]) . ' ',0,1) &lt;= '9') {<br \/>\n      $uwidth=trim($uparts[$ioff - 2 + sizeof($uparts)]);<br \/>\n      $uheight=trim(explode('#',explode('?',$uparts[$ioff - 1 + sizeof($uparts)])[0])[0]);<br \/>\n      $imfnameafterdomainsep=\"random_background_fadeinout.jpg\";<br \/>\n      $ptitle=\"Random Background Webpage Fade Tutorial\";<br \/>\n      selectNewBlogPostingTutorialPicture();<br \/>\n      $postingiurl=explode('ITblog' . DIRECTORY_SEPARATOR, dirname(__FILE__) . DIRECTORY_SEPARATOR)[0] . $imfnameafterdomainsep;<br \/>\n      list($iwidth, $iheight, $itype, $iattr) = getimagesize($postingiurl);<br \/>\n      $amime = getimagesize($postingiurl);<br \/>\n      if ($ioff == 0) {<br \/>\n      echo \"&lt;html&gt;\" . $tonl . \"&lt;body\" . $bonl . \"&gt;&lt;pre&gt;data:image\/jpeg;base64,\" . base64_encode(createScaledImage($uwidth,$uheight,$postingiurl,true)) . \"#\" . str_replace('+','%20',urlencode($ptitle)) . \"&lt;\/pre&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n      } else if (1 == 2) {<br \/>\n      echo '&lt;img src=\"' . \"data:image\/jpeg;base64,\" . base64_encode(file_get_contents($postingiurl)) . \"#\" . str_replace('+','%20',urlencode($ptitle)) . '\"&gt;&lt;\/img&gt;';<br \/>\n      } else {<br \/>\n      createScaledImage($uwidth,$uheight,$postingiurl,false); \/\/imagecreatefromjpeg($postingiurl);<br \/>\n      }<br \/>\n      exit;<br \/>\n    }<br \/>\n  }<br \/>\n}<\/font><br \/>\n<br \/>\nget_header(); ?&gt;<br \/>\n<br \/>\n\/\/ more WordPress \"codex\" PHP code follows<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; that amount to changes which enable two types of newly functional URLs that, without the changes, used to result in a WordPress webpage explaining that the URL could not be found &#8230;<\/p>\n<ol>\n<li>a URL such as <a target=_blank title='https:\/\/www.rjmprogramming.com.au\/ITblog\/537\/500' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/537\/500'>https:\/\/www.rjmprogramming.com.au\/ITblog\/537\/500<\/a> will pick a random RJM Programming Blog tutorial picture and show &#8230;<br \/>\n<code><br \/>\n[image data URI of tutorial picture]#[blog posting title]<br \/>\n<\/code><br \/>\n &#8230; along with the happy discovery along the way that the &#8220;#[blog posting title]&#8221; can be tagged onto a base64 data URI and still successfully display the image\n<\/li>\n<li>whereas a URL such as <a target=_blank title='https:\/\/www.rjmprogramming.com.au\/ITblog\/537\/500\/' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/537\/500\/'>https:\/\/www.rjmprogramming.com.au\/ITblog\/537\/500\/<\/a> will pick a random RJM Programming Blog tutorial picture and show it<\/li>\n<\/ol>\n<p> &#8230; the combination allowing <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.html-GETME\">our changed<\/a> <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.htm\">CSS (styling) &#8220;object-fit&#8221; experimenting web application<\/a> to be now allowing for two sources of image data which the user can select between, themselves, with the RJM Programming WordPress Blog images also containing clickable links back to the WordPress Blog post of relevance.  You can also try this <a title='Iframe usage' href='#myifagd'>here<\/a>.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>And then there is some optional filtering of RJM Programming blog image topic, as we make happen with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/images_fitting_a_given_dimension.html--GETME\">our changed<\/a> <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.htm\">CSS (styling) &#8220;object-fit&#8221; experimenting web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-sources-tutorial\/'>Image Pair Fitting into a Given Dimension Sources Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ipfgdpt'>Previous relevant <a target=_blank title='Image Pair Fitting into a Given Dimension Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-primer-tutorial\/'>Image Pair Fitting into a Given Dimension 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\/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 id=myifagd 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<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='#d55703' onclick='var dv=document.getElementById(\"d55703\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55703' 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='#d55780' onclick='var dv=document.getElementById(\"d55780\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/refresh\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55780' 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='#d55811' onclick='var dv=document.getElementById(\"d55811\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55811' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are many many approaches where one webpage navigating to another can share data. Think, listing just a few &#8230; URL &#8220;get&#8221; ? and &#038; arguments &#8230; on client side or server side &#8230; Ajax or HTML form (method=) &#8220;post&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-refresh-hashtag-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,14,37],"tags":[42,3849,85,3293,151,1887,2370,2369,281,1654,2507,3330,446,3978,557,2258,576,590,2065,2169,830,2910,917,1738,929,932,2375,970,972,3895,997,1911,1059,3974,1125,1200,3753,1319,3975,1324,1325,1345,1411,2257,1433,1456],"class_list":["post-55811","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-htaccess","tag-404-php","tag-apache","tag-aspect-ratio","tag-blog","tag-codex","tag-contain","tag-cover","tag-css","tag-data-uri","tag-dimension","tag-fill","tag-float","tag-hasgtag","tag-hashtag","tag-height","tag-html","tag-image","tag-interval","tag-location-hash","tag-navigation","tag-pair","tag-permalink","tag-photo","tag-photograph","tag-php","tag-picture","tag-post","tag-posting","tag-posting-title","tag-programming","tag-refresh","tag-resize","tag-scale-down","tag-setinterval","tag-stop-press","tag-sup","tag-tutorial","tag-tutorial-picture","tag-twentyten","tag-twentyten-theme","tag-url","tag-web-server","tag-width","tag-window-open","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55811"}],"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=55811"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55811\/revisions"}],"predecessor-version":[{"id":55814,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55811\/revisions\/55814"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}