<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; }
</style>
<script type='text/javascript'>
var sixhundred='600';
var fourhundred='400';
function refit() {
var 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 + '/');
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='';
}
}
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('/' + fourhundred + '/', '/' + tdrecthpx.replace('px','') + '/');
document.getElementById('iright').src=document.getElementById('iright').src.replace('/' + fourhundred + '/', '/' + tdrecthpx.replace('px','') + '/');
fourhundred=('' + tdrecthpx.replace('px',''));
}
}
</script>
</head>
<body onload="refit();">
<h1>Images Fitting a Given Dimension via object-fit</h1>
<h2>RJM Programming - May, 2022</h2>
<h3>Thanks to <a target=_blank title='CSS object-fit Property' href='https://www.w3schools.com/css/css3_object-fit.asp'>CSS object-fit Property</a> and <a target=_blank title='Lorem Picsum' href='https://picsum.photos'>Lorem Picsum</a></h3>
<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;">
<img id=ileft src="//picsum.photos/600/400/?random=656756785" alt="Left" style="float:left;width:50%;height:100%;object-fit:cover;">
<img id=iright src="//picsum.photos/600/400/?random=6547756785" alt="Right" style="float:left;width:50%;height:100%;object-fit:cover;">
</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>