Our project is trying to compare two pictures. We are able to have the two pictures pop up, but they just move on top of each other if we change the size of the window. We want them to stay side by side and just change the size of the image if the window changes. I've also put an example of the line of code for our images.
var stimulus =
'<img src=' +
'img/' +
artistArray2_b[3] +
'/' +
lastName_b[3] +
1 +
'.jpg' +
' style="max-width:100%;" />, <img src =' +
'img/' +
artistArray2_b[3] +
'/' +
lastName_b[3] +
2 +
'.jpg' +
' style="max-width:100%;" />';
change the size of the image if the window changes.
This sounds like task for using CSS viewport related unit. In this case probably vw i.e. pertaining to width (100vw = full width), consider following simple example
<html>
<head></head>
<body>
<div style="background-color:#0000FF;height:100px;width:50vw"></div>
</body>
</html>
It does provide blue div with constant height of 100px and width half of viewport that is it will shrink or elongate depending on you changing size of your browser window.