div.innerHTML+=img tag is not allowing object-fit:fill styling

UPDATE - After deleting this post to investigate along a different line of reasoning, I still end up with this very same question. Note very minor changes now, as I am using document.querySelector('div[id=\'animatordivalertsdirectorytomainjpgviewer2\']'). to avoid any ambiguity about the div id. I have also switched to using exclusively the style.width and style.height instead of simple width and height. I've applied those changes to this post content. Original OP below:

Something about adding img elements into a div with div.innerHTML+=img prevents object-fit: fill; (the style directive that dynamically sizes img to fill its container) from having any effect for me. Instead of trouble-free size-tracking (if you will) supposed to be enforced by object-fit: fill;, I'm having to iterate over all the many img elements to resize them during div resizing. This even though the img elements do become childNodes of the containing div!

Frankly, I'm confessing that I don't know the javascript instruction to use that will insure a newly created img element actually gets placed 'into'(?) the intended div DOM container so as to cause img rendered size to track the size of its containing div during div resizing. If div.innerHTML+=img doesn't 'containerize' (if you will) the img tags, what does?

Obviously I am unsure of correct terminologies, which hinders me in researching this concept. Forgive me for that, and enlighten me, please.

The div will get resized by height and width slider range elements, the height slider code being:

<input type="range" min="-2800" max="-50" step="1" list="tickmarks" value="-258" id="snapsslidervert"  oninput="   document.querySelector('div[id=\'animatordivalertsdirectorytomainjpgviewer2\']').style.width=parseInt(parseInt(this.value)+440)+'px'  "  orient="vertical"  >  

where animatordivalertsdirectorytomainjpgviewer2 has had img elements attached via

document.querySelector('div[id=\'animatordivalertsdirectorytomainjpgviewer2\']').innerHTML += '<img src=\"'+table_el.rows[rowindex].cells[1].children[0].href+'\" style=\'position:absolute;top:15px;height:'+parseInt(snapsdirectory.offsetHeight)+'px;width:'+mainjpgviewer2.width+';z-index:1;object-fit: fill;\' />';  

You'll see the object-fit: fill; directive at the very end of the img above

UPDATE - To prove that the div is not null, the following iteration loop performs in the same function as, and a line or tow after the div.innerHTML+=img instruction without console error as it acts on the img elements' zIndex properties:

  for(var i=0;i<document.querySelector('div[id=\'animatordivalertsdirectorytomainjpgviewer2\']').childNodes.length;i++)    {       document.querySelector('div[id=\'animatordivalertsdirectorytomainjpgviewer2\']').childNodes[i].style.zIndex='0'    }  

https://stackoverflow.com/questions/66912163/div-innerhtml-img-tag-is-not-allowing-object-fitfill-styling April 02, 2021 at 06:08AM