渲染前计算屏幕尺寸的图像尺寸

Question

Is there a way of calculating / estimating what the image size would be depending on the screen resolution before the image has been rendered? I need more logical help rather than code to be honest. What do I need to calculate?

Image size: 800px * 450px

Window size: 424px * 728px

The image works out to be 424px * 239px. I need to calculate this in code so I can adjust positions of other elements following after (absolute / fixed elements).

What I have done so far is;

var ratio1 = (this.retrievedNewsArticle.featuredImage.width / this.retrievedNewsArticle.featuredImage.height);
var ratio2 = ($(window).innerWidth() / this.retrievedNewsArticle.featuredImage.width);

// Ratio 1 = 424
// Ratio 2 = 0.53

So what's next?

Answer 1

It sounds like you already know the image's size, and it sounds like you want the image to be the full width of the window, and just need to know how to determine the height of the image. If so, the target height is the image height times the windows width divided by the image width:

var renderedWidth = imageWidth;
var renderedHeight = imageHeight * (windowWidth / imageWidth);

That maintains the aspect ratio.

That assumes the image is always wider than the screen. Let's remove that assumption.

If you want the image to stretch to fill:

var renderedWidth, renderedHeight;
if (windowWidth >= imageWidth) {
    renderedWidth = imageWidth * (windowWidth / imageWidth);
} else {
    renderedWidth = imageWidth;
}
renderedHeight = imageHeight * (windowWidth / renderedWidth);

If you don't want the image to stretch to fill:

var renderedWidth, renderedHeight;
if (windowWidth >= imageWidth) {
    renderedWidth = imageWidth;
    renderedHeight = imageHeight;
} else {
    renderedWidth = imageWidth;
    renderedHeight = imageHeight * (windowWidth / imageWidth);
}