Fix intro image scaling if used in compound content types

[otacke]

When using QS in compound content types (in Column in particular),
the intro div may not have been rendered when determining its
width. In consequence, instead of scaling the intro image to full
width, it would be displayed in its natural dimensions in Column.

This pull request fixes this behavior and the intro image will scale
properly in Column as well.

[ilukanets]

We have the same issue with intro image on our platform. It's really annoying and we have a lot of complaints from our users. Problem appears more often if image has large size and it takes more time to load it.

@otacke I'm not sure setTimeout is the best solution, but if it works... As an alternative I suggest an image could be created with JS and styles to be attached on image load event.

var bgImg = params.introPage.backgroundImage;
var bgImhPath = H5P.getPath(bgImg.path, contentId);
var bgImgRatio = (bgImg.height / bgImg.width);
var image = new Image();
        
image.onload = function() {
   $intro.css({
     background: '#fff url("' + bgImgPath + '") no-repeat 50% 50%',
     backgroundSize: 'auto 100%',
     minHeight: bgImgRatio * +window.getComputedStyle($intro[0]).width.replace('px','')
   });
}

image.src = bgImgPath;

[otacke]

@ilukanets Feel free to change the code the way you want to. I'm not attached to anything. Ultimately, it's not my decision, but the H5P core teams'.