<!doctype html>
<html>
<head>
<title>CSS3 object-fit Property - RJM Programming, October, 2017</title>
<style>
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.scale-down { object-fit: scale-down; }
.none { object-fit: none; }
div {
border: 1px solid orange;
resize: both;
overflow: auto;
}
</style>
<script type='text/javascript'>
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 from=['width:118px;height:89px;','width:272px;height:480px;'];
var to=['width:118px;height:89px;','width:272px;height:480px;'];
var fromm=['//www.rjmprogramming.com.au/logo_old_okay.jpg','//www.rjmprogramming.com.au/PHP/videos/Nala_HideAndSeek.m4v'];
var tom=['//www.rjmprogramming.com.au/logo_old_okay.jpg','//www.rjmprogramming.com.au/PHP/videos/Nala_HideAndSeek.m4v'];
var fromt=['nowayjose','video/mp4'];
var tot=['nowayjose','video/mp4'];
var types = ["audio/wav","audio/x-wav","audio/x-pn-realaudio","audio/x-mpegurl","audio/x-aiff","audio/mpeg","audio/mid",
"audio/basic","audio/ogg","video/x-sgi-movie","video/x-msvideo","video/quicktime","audio/mp3","video/mp4","video/mpeg",
"video/x-la-asf","video/ogg","video/webm","audio/mp4", "image/jpeg", "image/jpeg", "image/png", "image/gif", "image/bmp", "image/tif",
"text/html", "text/html", "text/html", "text/javascript", "text/css", "text/plain", "text/xml", "text/csv",
"application/vnd.ms-word", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/x-php", "application/pdf",
"application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.ms-powerpoint",
"application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
var exts = [".wav",".wav",".ram",".m3u",".aiff",".mp3",".rmi",
".snd",".ogg",".movie",".avi",".mov",".mp3",".m4v",".mpeg",
".lsx",".ogv",".webm",".m4a", ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".tif",
".htm", ".html", ".htmls", ".js", ".css", ".txt", ".xml", ".csv",
".doc", ".docx", ".php", ".pdf",
".pptx", ".ppt",
".xls", ".xlsx"];
function checkm(isel) {
tom[eval(isel.id.replace('iimage','0').replace('ivideo','1'))]=isel.value;
var thisext1=('.' + isel.value).split('#')[0].split('?')[0].split('.')[eval(-1 + ('.' + isel.value).split('#')[0].split('?')[0].split('.').length)];
var thismtype1='video/mp4';
var imt;
for (imt=0; imt<exts.length; imt++) {
if (('.' + thisext1.toLowerCase()) == exts[imt]) {
if (types[imt].indexOf('video/') != -1) tot[eval(isel.id.replace('iimage','0').replace('ivideo','1'))]=types[imt];
}
}
if (eval(isel.id.replace('iimage','0').replace('ivideo','1')) == 1) {
changeit(document.getElementById('svideo'));
} else {
changeit(document.getElementById('simage'));
}
}
function changeit(osel) {
if (osel.value != '') {
document.getElementById(osel.id.replace('s','t')).innerHTML=urls[eval(osel.id.replace('simage','0').replace('svideo','1'))].replace('class=x','class=' + osel.value).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'))]);
} else {
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';
}
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;';
//if (prevdw < 0.0 && prevdh < 0.0) {
// document.getElementById('myh1').innerHTML+=' ... ' + dw + ',' + dh + ' ' + to[0] + ' ... ' + to[1];
//}
prevdw=dw;
prevdh=dh;
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'))]);
}
}
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];
}
}
</script>
</head>
<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>
</tbody>
</table>
</div>
</body>
</html>