11,16d10
< 
< div {
<     border: 1px solid orange;
<     resize: both;
<     overflow: auto;
< }
19,20c13
< var dw=0.0, dh=0.0, prevdw=-1.0, prevdh=-1.0;
< var urls=['<img class=x src="//www.rjmprogramming.com.au/logo_old_okay.jpg" alt="Logo" style="width:118px;height:89px;">','<video class=x alt="Nala" style="width:272px;height:480px;" controls="controls"><source src="//www.rjmprogramming.com.au/PHP/videos/Nala_HideAndSeek.m4v" type="video/mp4" /></video>'];
---
> var urls=['<img class=x src="//www.rjmprogramming.com.au/logo_old_okay.jpg" alt="Logo" style="width:118px;height:89px;">','<video class=x alt="Nala" style="width:272px;height:480px;"><source src="//www.rjmprogramming.com.au/PHP/videos/Nala_HideAndSeek.m4v" type="video/mp4" /></video>'];
65,76d57
<   if (('' + document.getElementById('mydiv').style.width).replace('px','').indexOf('%') != -1) {
<   dw=(eval(window.getComputedStyle(document.getElementById('mydiv'), null).getPropertyValue('width').replace('px',''))); // + 'px';
<   document.getElementById('mydiv').style.width='' + dw + 'px';
<   } else {
<   dw=('' + document.getElementById('mydiv').style.width).replace('px',''); // (eval(window.getComputedStyle(document.getElementById('mydiv'), null).getPropertyValue('width').replace('px',''))); // + 'px';
<   }
<   if (('' + document.getElementById('mydiv').style.height).replace('px','').indexOf('%') != -1) {
<   dh=(eval(window.getComputedStyle(document.getElementById('mydiv'), null).getPropertyValue('height').replace('px',''))); // + 'px';
<   document.getElementById('mydiv').style.height='' + dh + 'px';
<   } else {
<   dh=('' + document.getElementById('mydiv').style.height).replace('px',''); // (eval(window.getComputedStyle(document.getElementById('mydiv'), null).getPropertyValue('height').replace('px',''))); // + 'px';
<   }
78,82d58
<   //if (prevdw < 0.0 && prevdh < 0.0) {
<   //  document.getElementById('myh1').innerHTML+=' ... ' + dw + ',' + dh + ' ' + to[0] + ' ... ' + to[1];
<   //}
<   prevdw=dw;
<   prevdh=dh;
86,128d61
< 
< function predynwh() {
<   dynwh(document.getElementById('mydiv'));
<   setTimeout(predynwh,1000);
< }
< 
< function dynwh(od) {
<   dw=('' + od.style.width).replace('px',''); // (eval(window.getComputedStyle(od, null).getPropertyValue('width').replace('px',''))); // + 'px';
<   dh=('' + od.style.height).replace('px',''); // (eval(window.getComputedStyle(od, null).getPropertyValue('height').replace('px',''))); // + 'px';
<   if (Math.floor(dw) != Math.floor(prevdw) || Math.floor(dh) != Math.floor(prevdh)) {
<   //alert('' + dw + ' ' + prevdw + ' ' + dh + ' ' + prevdh);
<   prevdw=dw;
<   prevdh=dh;
<   //document.getElementById('myh3').innerHTML=('' + Math.floor(eval(dw * 97.0 / 196.0)) + 'px') + ' x ' + '' + Math.floor(eval(dh - 70.0)) + 'px';
<   document.getElementById('mytable').style.width='' + Math.floor(eval(dw * 97.0 / 98.0)) + 'px';
<   document.getElementById('mytable').style.height='' + Math.floor(eval(dh - 10.0)) + 'px';
<   document.getElementById('mytbody').style.width='' + Math.floor(eval(dw * 97.0 / 98.0)) + 'px';
<   document.getElementById('mytbody').style.height='' + Math.floor(eval(dh - 10.0)) + 'px';
<   document.getElementById('tr1').style.width='' + Math.floor(eval(dw * 97.0 / 98.0)) + 'px';
<   document.getElementById('tr2').style.width='' + Math.floor(eval(dw * 97.0 / 98.0)) + 'px';
<   document.getElementById('himage').style.width='' + Math.floor(eval(dw * 97.0 / 196.0)) + 'px';
<   document.getElementById('hvideo').style.width='' + Math.floor(eval(dw * 97.0 / 196.0)) + 'px';
<   document.getElementById('timage').style.width='' + Math.floor(eval(dw * 97.0 / 196.0)) + 'px';
<   document.getElementById('tvideo').style.width='' + Math.floor(eval(dw * 97.0 / 196.0)) + 'px';
<   document.getElementById('tr1').style.height='60px';
<   document.getElementById('tr2').style.height='' + Math.floor(eval(dh - 100.0)) + 'px';
<   document.getElementById('timage').style.height='' + Math.floor(eval(dh - 100.0)) + 'px';
<   document.getElementById('tvideo').style.height='' + Math.floor(eval(dh - 100.0)) + 'px';
<   //dw=(eval(window.getComputedStyle(document.getElementById('mydiv'), null).getPropertyValue('width').replace('px',''))); // + 'px';
<   //dh=(eval(window.getComputedStyle(document.getElementById('mydiv'), null).getPropertyValue('height').replace('px',''))); // + 'px';
<   var osel=document.getElementById('simage');
<   //to[eval(osel.id.replace('simage','0').replace('svideo','1'))]='width:' + Math.floor(eval(window.getComputedStyle(document.getElementById(osel.id.replace('s','t')), null).getPropertyValue('width').replace('px',''))) + 'px;height:' + Math.floor(eval(window.getComputedStyle(document.getElementById(osel.id.replace('s','t')), null).getPropertyValue('height').replace('px',''))) + 'px;';
<   to[eval(osel.id.replace('simage','0').replace('svideo','1'))]='width:' + '' + Math.floor(eval(dw * 97.0 / 196.0)) + 'px;height:' + '' + Math.floor(eval(dh - 100.0)) + 'px;';
<   document.getElementById(osel.id.replace('s','t')).innerHTML=urls[eval(osel.id.replace('simage','0').replace('svideo','1'))].replace(from[eval(osel.id.replace('simage','0').replace('svideo','1'))],to[eval(osel.id.replace('simage','0').replace('svideo','1'))]).replace(fromm[eval(osel.id.replace('simage','0').replace('svideo','1'))],tom[eval(osel.id.replace('simage','0').replace('svideo','1'))]).replace(fromt[eval(osel.id.replace('simage','0').replace('svideo','1'))],tot[eval(osel.id.replace('simage','0').replace('svideo','1'))]);
<   osel=document.getElementById('svideo');
<   //to[eval(osel.id.replace('simage','0').replace('svideo','1'))]='width:' + Math.floor(eval(window.getComputedStyle(document.getElementById(osel.id.replace('s','t')), null).getPropertyValue('width').replace('px',''))) + 'px;height:' + Math.floor(eval(window.getComputedStyle(document.getElementById(osel.id.replace('s','t')), null).getPropertyValue('height').replace('px',''))) + 'px;';
<   to[eval(osel.id.replace('simage','0').replace('svideo','1'))]='width:' + '' + Math.floor(eval(dw * 97.0 / 196.0)) + 'px;height:' + '' + Math.floor(eval(dh - 100.0)) + 'px;';
<   document.getElementById(osel.id.replace('s','t')).innerHTML=urls[eval(osel.id.replace('simage','0').replace('svideo','1'))].replace(from[eval(osel.id.replace('simage','0').replace('svideo','1'))],to[eval(osel.id.replace('simage','0').replace('svideo','1'))]).replace(fromm[eval(osel.id.replace('simage','0').replace('svideo','1'))],tom[eval(osel.id.replace('simage','0').replace('svideo','1'))]).replace(fromt[eval(osel.id.replace('simage','0').replace('svideo','1'))],tot[eval(osel.id.replace('simage','0').replace('svideo','1'))]);
<   changeit(document.getElementById('simage')); 
<   changeit(document.getElementById('svideo'));
<   //document.getElementById('myh3').innerHTML=to[0] + ' ... ' + to[1];
<   }
< }
131,138c64,70
< <body onload="changeit(document.getElementById('simage')); changeit(document.getElementById('svideo')); setTimeout(predynwh,1000);">
< <h1 id='myh1'>CSS3 object-fit resizing Properties</h1>
< <h3 id='myh3'>RJM Programming, October, 2017 ... thanks to <a target=_blank title='https://www.w3schools.com/css/css3_object-fit.asp' href='https://www.w3schools.com/css/css3_object-fit.asp'>https://www.w3schools.com/css/css3_object-fit.asp</a></h3>
< <div id='mydiv' style="width:98%;height:810px;align:center;" onresize="dynwh(this);">
< <table id='mytable' style="width:97%;height:800px;align:center;">
< <tbody id='mytbody' style="width:97%;height:800px;align:center;">
< <tr style="height:60px;" id='tr1'><th id=himage><select style='width:30%;' id=simage onchange=changeit(this);><option value=''>Image</option><option value='fill'>img.fill { object-fit: fill; }</option><option value='contain'>img.contain { object-fit: contain; }</option><option value='cover'>img.cover { object-fit: cover; }</option><option value='scale-down'>img.scale-down { object-fit: scale-down; }</option><option value='none'>img.none { object-fit: none; }</option></select> <input style='width:68%;' onblur='checkm(this);' type=url id=iimage value='//www.rjmprogramming.com.au/logo_old_okay.jpg'></input></th><th id=hvideo><select style='width:30%;' id=svideo onchange=changeit(this);><option value=''>Video</option><option value='fill'>video.fill { object-fit: fill; }</option><option value='contain'>video.contain { object-fit: contain; }</option><option value='cover'>video.cover { object-fit: cover; }</option><option value='scale-down'>video.scale-down { object-fit: scale-down; }</option><option value='none'>video.none { object-fit: none; }</option></select> <input style='width:68%;' onblur='checkm(this);' type=url id=ivideo value='//www.rjmprogramming.com.au/PHP/videos/Nala_HideAndSeek.m4v'></input></th></tr>
< <tr id='tr2'><td id=timage style='border:1px solid red;vertical-align:top;width:50%;height:70%;'></td><td id=tvideo style='border:1px solid red;vertical-align:top;width:50%;height:70%;'></td></tr>
---
> <body onload="changeit(document.getElementById('simage')); changeit(document.getElementById('svideo'));">
> <h1>CSS3 object-fit Property</h1>
> <h3>RJM Programming, October, 2017 ... thanks to <a target=_blank title='https://www.w3schools.com/css/css3_object-fit.asp' href='https://www.w3schools.com/css/css3_object-fit.asp'>https://www.w3schools.com/css/css3_object-fit.asp</a></h3>
> <table style="width:100%;height:800px;">
> <tbody>
> <tr style="height:30px;"><th><select style='width:30%;' id=simage onchange=changeit(this);><option value=''>Image</option><option value='fill'>img.fill { object-fit: fill; }</option><option value='contain'>img.contain { object-fit: contain; }</option><option value='cover'>img.cover { object-fit: cover; }</option><option value='scale-down'>img.scale-down { object-fit: scale-down; }</option><option value='none'>img.none { object-fit: none; }</option></select> <input style='width:68%;' onblur='checkm(this);' type=url id=iimage value='//www.rjmprogramming.com.au/logo_old_okay.jpg'></input></th><th><select style='width:30%;' id=svideo onchange=changeit(this);><option value=''>Video</option><option value='fill'>video.fill { object-fit: fill; }</option><option value='contain'>video.contain { object-fit: contain; }</option><option value='cover'>video.cover { object-fit: cover; }</option><option value='scale-down'>video.scale-down { object-fit: scale-down; }</option><option value='none'>video.none { object-fit: none; }</option></select> <input style='width:68%;' onblur='checkm(this);' type=url id=ivideo value='//www.rjmprogramming.com.au/PHP/videos/Nala_HideAndSeek.m4v'></input></th></tr>
> <tr><td id=timage style='border:1px solid red;vertical-align:top;width:50%;height:70vh;'></td><td id=tvideo style='border:1px solid red;vertical-align:top;width:50%;height:70vh;'></td></tr>
141d72
< </div>