<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;

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);
document.getElementById('ifright').src=prefix + sixhundred + '/' + fourhundred + '?random=' + Math.floor(Math.random() * 198765643);
}
}
}

function changeh(osis) {
var tdrecthpx=osis.innerHTML;
document.getElementById('dh').innerHTML='' + tdrecthpx;
document.getElementById('dcontainer').style.height='' + tdrecthpx;
if (('' + tdrecthpx) != ('' + fourhundred + 'px')) {
document.getElementById('ileft').src=document.getElementById('ileft').src.replace('/' + sixhundred + '/' + fourhundred + '', '/' + sixhundred + '/' + tdrecthpx.replace('px','') + '');
document.getElementById('iright').src=document.getElementById('iright').src.replace('/' + sixhundred + '/' + fourhundred + '', '/' + sixhundred + '/' + tdrecthpx.replace('px','') + '');
fourhundred=('' + tdrecthpx.replace('px',''));
if (prefix != '//picsum.photos/') {
document.getElementById('ifleft').src=prefix + sixhundred + '/' + fourhundred + '?random=' + Math.floor(Math.random() * 198765643);
document.getElementById('ifright').src=prefix + sixhundred + '/' + fourhundred + '?random=' + Math.floor(Math.random() * 198765643);
}
}
}

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/');
}

function undorjm() {
location.href=document.URL.split('#')[0].split('?')[0];
}

</script>
</head>
<body onload="setTimeout(refit,2000);">
<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 - 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></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> 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 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='/';
document.write('<img id=ileft src="' + pprefix + '600/400' + ssuffix + '?random=' + Math.floor(Math.random() * 198765643) + '" 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) + '" 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);
document.getElementById('ifright').src=pprefix + '600/400?random=' + Math.floor(Math.random() * 198765643);
}
</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>