I am currently working on a project where I am dealing with images of different sizes, and my goal is to adjust the parent div size based on the height of the new image.
Within my code, I have set inner, viewOne, and viewTwo as global variables. Here is a snippet of my code:
viewOne.src = 'path/to/newImage.png';
viewTwo.src = 'path/to/otherImage.png';
inner = document.getElementById('innerWindow'); // Parent Div
viewOne = document.getElementById('viewImgOne'); // Image Object
viewTwo = document.getElementById('viewImgTwo'); // Image Object
if(viewOne.clientHeight >= viewTwo.clientHeight) {
inner.style.height = viewOne.clientHeight + "px";
} else {
inner.style.height = viewTwo.clientHeight + "px";
};
However, there seems to be an issue with the parent div not always resizing correctly after changing the image paths, resulting in extra pixels at the bottom of the div that are not needed.
In addition, I have implemented a window.onresize function to handle resizing the div when the browser window changes, which is functioning properly.
My question is: Is there a way to monitor the src attribute and trigger the resize function only after the images have fully loaded?