<html>
<head>
<title>Images Fitting a Given Dimension via object-fit - RJM Programming - May, 2022 ... thanks to https://www.w3schools.com/css/css3_object-fit.asp</title>
<style>
td { vertical-align: top; }
div { border: 1px dotted yellow; }
/* ?prefix=//www.rjmprogramming.com.au/ITblog/ is RJM Programming tutorial, as source, argument */
</style>
<script type='text/javascript'>
var sixhundred='600';
var fourhundred='400';
var prefix=location.search.split('prefix=')[1] ? decodeURIComponent(location.search.split('prefix=')[1].split('&')[0]) : '//picsum.photos/';
var suffix='/';
var lsrc='';
var rsrc='';
var tdrectw=sixhundred;
var wassix=sixhundred;
var mustcontain=location.search.split('mustcontain=')[1] ? decodeURIComponent(location.search.split('mustcontain=')[1].split('&')[0]) : '';
var onemustcontain='';
var animatechar='-';
var animatesettled=false;
var animateinterval=-1;
var animsi=null;
var animsitwo=null;
function after() {
document.getElementById('iright').src=document.getElementById('iright').src.replace('/' + wassix + '/', '/' + tdrectw + '/');
wassix=sixhundred;
}
function refit() {
tdrectw=('' + eval(eval('' + document.getElementById('tdcontainer').getBoundingClientRect().width) / 1)).split('.')[0];
document.getElementById('dw').innerHTML='' + tdrectw + 'px';
//document.getElementById('dcontainer').style.width='' + tdrectw + 'px';
if (('' + tdrectw) != sixhundred) {
document.getElementById('ileft').src=document.getElementById('ileft').src.replace('/' + sixhundred + '/', '/' + tdrectw + '/');
document.getElementById('iright').src=document.getElementById('iright').src.replace('/' + sixhundred + '/', '/' + tdrectw + '/');
//setTimeout(after, 3000);
sixhundred=('' + tdrectw);
}
document.getElementById('thc').title='Initially ' + sixhundred + 'px wide (but see Width hover blurb).';
}
function changeit(osis) {
document.getElementById('ileft').style.objectFit=osis.value;
document.getElementById('iright').style.objectFit=osis.value;
}
function changew(osis) {
var tdrectwpx=osis.innerHTML;
document.getElementById('dw').innerHTML='' + tdrectwpx;
document.getElementById('dcontainer').style.width='' + tdrectwpx;
if (('' + tdrectwpx) != ('' + sixhundred + 'px')) {
document.getElementById('ileft').src=document.getElementById('ileft').src.replace('/' + sixhundred + '/', '/' + tdrectwpx.replace('px','') + '/');
document.getElementById('iright').src=document.getElementById('iright').src.replace('/' + sixhundred + '/', '/' + tdrectwpx.replace('px','') + '/');
sixhundred=('' + tdrectwpx.replace('px',''));
document.getElementById('myh4').innerHTML='Not as much point to resizing the window now!';
document.getElementById('dw').title='';
document.getElementById('thw').title='';
if (prefix != '//picsum.photos/') {
document.getElementById('ifleft').src=prefix + sixhundred + '/' + fourhundred + '?random=' + Math.floor(Math.random() * 198765643) + onemustcontain;
document.getElementById('ifright').src=prefix + sixhundred + '/' + fourhundred + '?random=' + Math.floor(Math.random() * 198765643) + onemustcontain;
}
}
}
function changeh(osis) {
var suffc='';
var ofour=fourhundred;
var tdrecthpx=osis.innerHTML;
document.getElementById('dh').innerHTML='' + tdrecthpx;
document.getElementById('dcontainer').style.height='' + tdrecthpx;
if (('' + tdrecthpx) != ('' + fourhundred + 'px')) {
if (('' + ofour).indexOf('-') != -1) { suffc='&another=' + Math.floor(Math.random() * 19876564); }
document.getElementById('ileft').src=document.getElementById('ileft').src.replace('/' + sixhundred + '/' + fourhundred.replace('-','') + '', '/' + sixhundred + '/' + tdrecthpx.replace('px','') + '') + suffc;
document.getElementById('iright').src=document.getElementById('iright').src.replace('/' + sixhundred + '/' + fourhundred.replace('-','') + '', '/' + sixhundred + '/' + tdrecthpx.replace('px','') + '') + suffc;
fourhundred=('' + tdrecthpx.replace('px',''));
if (prefix != '//picsum.photos/') {
document.getElementById('ifleft').src=prefix + sixhundred + '/' + fourhundred.replace('-','') + '?random=' + Math.floor(Math.random() * 198765643) + onemustcontain;
document.getElementById('ifright').src=prefix + sixhundred + '/' + fourhundred.replace('-','') + '?random=' + Math.floor(Math.random() * 198765643) + onemustcontain;
}
}
}
function fillinleft(liois) {
var ltutdate=''
if (liois != null) {
if (liois.src.indexOf('/ITblog') != -1 && liois.src != document.URL) {
var laconto = (liois.contentWindow || liois.contentDocument);
if (laconto != null) {
if (laconto.document) { laconto = laconto.document; }
if (laconto.body != null) {
if (laconto.head.innerHTML.indexOf(' (') != -1 && laconto.head.innerHTML.indexOf(')') != -1) {
ltutdate=' (' + laconto.head.innerHTML.split(' (')[1].split(')')[0] + ')';
}
if (laconto.body.innerHTML.indexOf('<pre>') != -1) {
//document.getElementById('ileft').src=laconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0];
if (laconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0].indexOf('#') != -1) {
//alert('Yes ' + laconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0].split('#')[1]);
document.getElementById('ileft').onclick = function(evt){ window.open('//www.rjmprogramming.com.au/ITblog/' + decodeURIComponent(laconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0].split('#')[1]).split(' (')[0].toLowerCase().replace("+","").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(/---/g,"-").replace(/--/g,"-") , '_blank', 'top=50,left=50,height=' + eval(-100 + screen.height) + ',width=' + eval(-100 + screen.width)); };
document.getElementById('ileft').title=decodeURIComponent(laconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0].split('#')[1]); // + ltutdate;
document.getElementById('ileft').src=laconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0];
} else {
document.getElementById('ileft').title='';
}
}
}
}
}
}
}
function prefillinright() {
fillinright(document.getElementById('ifright'));
}
function prefillinleft() {
fillinleft(document.getElementById('ifleft'));
}
function fillinright(iois) {
var tutdate=''
if (iois != null) {
if (iois.src.indexOf('/ITblog') != -1 && iois.src != document.URL) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.head.innerHTML.indexOf(' (') != -1 && aconto.head.innerHTML.indexOf(')') != -1) {
tutdate=' (' + aconto.head.innerHTML.split(' (')[1].split(')')[0] + ')';
}
if (aconto.body != null) {
if (aconto.body.innerHTML.indexOf('<pre>') != -1) {
//document.getElementById('iright').src=aconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0];
if (aconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0].indexOf('#') != -1) {
//alert('yes ' + aconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0].split('#')[1]);
document.getElementById('iright').onclick = function(evt){ window.open('//www.rjmprogramming.com.au/ITblog/' + decodeURIComponent(aconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0].split('#')[1]).split(' (')[0].toLowerCase().replace("+","").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace("/","").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(/---/g,"-").replace(/--/g,"-") , '_blank', 'top=50,left=50,height=' + eval(-100 + screen.height) + ',width=' + eval(-100 + screen.width)); };
document.getElementById('iright').title=decodeURIComponent(aconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0].split('#')[1]); // + tutdate;
document.getElementById('iright').src=aconto.body.innerHTML.split('<pre>')[1].split('</pre>')[0];
} else {
document.getElementById('iright').title='';
}
}
}
}
}
}
}
function dorjm() {
location.href=document.URL.split('#')[0].split('?')[0] + '?prefix=' + encodeURIComponent('//www.rjmprogramming.com.au/ITblog/') + onemustcontain;
}
function undorjm() {
location.href=document.URL.split('#')[0].split('?')[0];
}
function premcbit() {
if (mustcontain != '') {
onemustcontain='&mustcontain=' + encodeURIComponent(mustcontain);
document.getElementById('mytable').title='' + onemustcontain;
}
}
function mcbit() {
if (mustcontain != '') {
document.getElementById('mustcontain').value=mustcontain;
mustcontain='&mustcontain=' + encodeURIComponent(mustcontain);
document.getElementById('mustcontain').title=mustcontain;
}
}
function animeter(insecs) {
if (document.getElementById('secs')) {
if (!document.getElementById('aprog')) {
//document.getElementById('secs').innerHTML=' <label id=lprog for="aprog">' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 / animateinterval) + '%)</label><progress title="' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 / animateinterval) + '%)" id="aprog" value="' + insecs + '" max="' + animateinterval + '"></progress> ';
document.getElementById('secs').innerHTML=' <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 + '"></progress> <label style=display:none; id=lprog for="aprog">' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 / animateinterval)).substring(0,6) + '%)</label>';
} else {
document.getElementById('aprog').value='' + insecs;
document.getElementById('aprog').title='' + insecs + ' of ' + animateinterval + '(' + eval(insecs * 100 / animateinterval) + '%)';
if (document.getElementById('lprog')) {
document.getElementById('lprog').title='' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 / animateinterval)).substring(0,6) + '%)';
document.getElementById('lprog').innerHTML='' + insecs + ' of ' + animateinterval + (' (' + eval(insecs * 100 / animateinterval)).substring(0,6) + '%)';
}
}
}
}
function animsecs() {
if (document.getElementById('secs')) {
if (document.getElementById('secs').innerHTML.trim() != '') {
//setTimeout(animsecs, 1000);
var isecs=animateinterval;
if (document.getElementById('aprog')) {
isecs=eval('' + document.getElementById('aprog').value);
}
isecs--;
if (('' + isecs).indexOf('-') != -1) {
animeter(animateinterval);
} else {
animeter(isecs);
}
}
}
}
function animateask() {
if (animsitwo) {
clearInterval(animsitwo);
}
if (animsi) {
clearInterval(animsi);
}
animateinterval=prompt('Enter photograph refresh interval in seconds.', '15');
if (animateinterval == null) {
animateinterval=-1;
animatesettled=false;
document.getElementById('secs').innerHTML='';
document.getElementById('animate').style.backgroundColor='yellow';
} else if (('' + animateinterval).indexOf('-') == -1 && ('' + animateinterval).trim() != '' && ('' + animateinterval + ' ').substring(0,1) >= '1' && ('' + animateinterval + ' ').substring(0,1) <= '9') {
animateinterval=('' + animateinterval).split('.')[0];
animatesettled=true;
animatechar='-';
document.getElementById('secs').innerHTML='';
animeter(animateinterval);
animsitwo=setInterval(animsecs, 1000);
document.getElementById('animate').style.backgroundColor='lightgreen';
//alert(eval(1000 * eval('' + ('' + animateinterval))));
animsi=setInterval(animnow, eval(1000 * eval('' + ('' + animateinterval))));
} else {
animateinterval=-1;
animatesettled=false;
document.getElementById('secs').innerHTML='';
document.getElementById('animate').style.backgroundColor='yellow';
}
}
function animminus() {
if (animatesettled) {
animatechar='-';
} else {
if (animatechar == '-') {
animatechar='|';
} else { //if (animatechar == ' | ') {
animatechar='-';
}
}
document.getElementById('animate').innerHTML=animatechar;
console.log(document.getElementById('animate').getBoundingClientRect().width);
}
function animnow() {
if (animatesettled) {
fourhundred='-' + ('' + fourhundred).replace('-','');
isecs=1;
animeter(isecs);
changeh(document.getElementById('dh'));
} else {
animatechar='-';
}
}
</script>
</head>
<body onload="premcbit(); setTimeout(mcbit, 1000); setTimeout(refit,2000); setInterval(animminus, 1000);">
<iframe onload=setTimeout(prefillinleft,1500); style=display:none; id=ifleft src=></iframe><iframe onload=setTimeout(prefillinright,3000); style=display:none; id=ifright src=></iframe>
<h1>Images Fitting a Given Dimension via object-fit</h1>
<h2>RJM Programming <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();>-</span><sup id=secs title='Refresh interval in seconds'></sup> May, 2022</h2>
<script type='text/javascript'>
var ppprefix=location.search.split('prefix=')[1] ? decodeURIComponent(location.search.split('prefix=')[1].split('&')[0]) : '//picsum.photos/';
if (ppprefix == '//picsum.photos/') {
document.write("<h3>Thanks to <a target=_blank title='CSS object-fit Property' href='//www.w3schools.com/css/css3_object-fit.asp'>CSS object-fit Property</a> and <a target=_blank title='Lorem Picsum' href='//picsum.photos'>Lorem Picsum</a> versus <button title='Via RJM Programming Blog Tutorial (tutorial picture) image resource' onclick=dorjm();>RJM Programming Blog Tutorials</button> <input type=text title='Optional must contain' placeholder='Optional must contain' value='' id=mustcontain style='display:inline-block;' onblur=\"if (this.value.length == 0) { mustcontain=''; this.title=''; onemustcontain=mustcontain; } else { mustcontain='&mustcontain=' + encodeURIComponent(this.value); this.title=mustcontain; onemustcontain=mustcontain; dorjm(); } \"></input></h3>");
} else {
document.write("<h3>Thanks to <a target=_blank title='CSS object-fit Property' href='//www.w3schools.com/css/css3_object-fit.asp'>CSS object-fit Property</a> and <a target=_blank title='RJM Programming Blog Tutorials' href='//www.rjmprogramming.com.au/ITblog'>RJM Programming Blog Tutorials</a> <input type=text placeholder='Optional must contain' placeholder='Optional must contain' value='' id=mustcontain style='display:inline-block;' onblur=\"if (this.value.length == 0) { mustcontain=''; this.title=''; onemustcontain=mustcontain; } else { mustcontain='&mustcontain=' + encodeURIComponent(this.value); this.title=mustcontain; onemustcontain=mustcontain; dorjm(); }\"></input> versus <button title='Via Lorem Picsum photography resource' onclick=undorjm();>Lorem Picsum</button></h3>");
}
</script>
<h4 id=myh4>Try resizing the window!</h4>
<body>
<table title='' id=mytable border=20 style="width:100%;">
<tr><th id=thw title='Initially 100% but you can change, and that nullifies some window resizing affects on images.'>Width</th><th>Height</th><th id=thc title=''>Container</th><th>The object-fit value</th></tr>
<tr><td><div title='Initially 100% but you can change, and that nullifies some window resizing affects on images.' id=dw contenteditable=true onblur=changew(this);>600px</div></td><td><div id=dh contenteditable=true onblur=changeh(this);>400px</div></td><td id=tdcontainer>
<div id=dcontainer style="width:100%;height:400px;">
<script type='text/javascript'>
var pprefix=location.search.split('prefix=')[1] ? decodeURIComponent(location.search.split('prefix=')[1].split('&')[0]) : '//picsum.photos/';
var ssuffix='/';
var twomustcontain=location.search.split('mustcontain=')[1] ? '&mustcontain=' + encodeURIComponent(decodeURIComponent(location.search.split('mustcontain=')[1].split('&')[0])) : '';
//alert(twomustcontain);
document.write('<img id=ileft src="' + pprefix + '600/400' + ssuffix + '?random=' + Math.floor(Math.random() * 198765643) + twomustcontain + '" alt="Left" style="float:left;width:50%;height:100%;object-fit:cover;">');
document.write('<img id=iright src="' + pprefix + '600/400' + ssuffix + '?random=' + Math.floor(Math.random() * 198765643) + twomustcontain + '" alt="Right" style="float:left;width:50%;height:100%;object-fit:cover;">');
if (pprefix != '//picsum.photos/') {
document.getElementById('ifleft').src=pprefix + '600/400?random=' + Math.floor(Math.random() * 198765643) + twomustcontain;
document.getElementById('ifright').src=pprefix + '600/400?random=' + Math.floor(Math.random() * 198765643) + twomustcontain;
}
</script>
</div>
</td><td><select size=5 onchange='changeit(this);' id=sof><option value='cover' selected>cover</option><option value='contain'>contain</option><option value='fill'>fill</option><option value='scale-down'>scale-down</option><option value='none'>none</option></select></td></tr>
</table>
</body>
</html>