title: Responsive image inside bootstrap modal - not showing until I resize the window
body: <p>I'm using the TwentyTwenty jQuery library to allow me to have 2 images with a before and after slider, and I want to display these inside a Bootstrap modal.</p>
  
  <p>However once I click on the thumbnail image to open the modal, the image doesn't display in the modal until I resize the browser (I can resize it by 1px and it'll display straight after).</p>
  
  <p>I've tried using window.dispatchEvent(new Event('resize')); to the browser to calculate the height required for the image, but it isn't working. Is there some function in JavaScript (or jQuery) that force the browser to display the image?</p>
  
  <p>The page is here:</p>
  
  <p><a href="http://turfectsolutions.chrisstclair.co.uk/Gallery/" rel="nofollow">http://turfectsolutions.chrisstclair.co.uk/Gallery/</a></p>
  
  <p>Thanks! :)</p>