the reason why the DIV cannot be supported is that the picture has not been fully loaded, and the div cannot get the true height of the picture, so it cannot be held up.
solution: listen to the loading process of the picture, and after the image is loaded, insert it using the html () method of JQ.

you can write your own code to determine after all the images have been loaded (the serial number is considered for compatibility, especially when the IE), is inserted into the dom. You can also use existing plug-ins, such as
imagesLoaded (official website: https://imagesloaded.desandro.)

pseudo code (the plug-in is used here in the way jquery is used, or the plug-in may not use juery):

//html
var html = "<div>aaa<img src="xxx"/>bbb<img src="xxx"/></div>";
$(html).imagesLoaded( function() {//dom
       //dom
});

there is some truth in what is said upstairs. I would like to add that you can listen to the onload event of the picture, in which you can get the width and height of the image, and then you can set the container to the same width and height for the time being.