在渲染之前在屏幕尺寸上计算图像尺寸

-1

在渲染图像之前，是否有计算/估计图像尺寸取决于屏幕分辨率的方法？我需要更多的合乎逻辑的帮助，而不是诚实的代码。我需要计算什么？在渲染之前在屏幕尺寸上计算图像尺寸

图像尺寸：800像素* 450像素

窗口大小：424px * 728px

的形象工程出来是424px * 239px。我需要在代码中计算这个值，以便我可以调整后面的其他元素的位置（绝对/固定元素）。

我到目前为止所做的是：

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

那么接下来呢？

来源

2017-04-12 Abdul Sadik Yalcin

哪里是目前用于使图像424的逻辑* 239？看到图像的大小与窗口大小有关，可能存在CSS或JavaScript使图像变大的情况。也许你应该在这一部分工作一些魔法，而不是计算所有这些东西。 – Glubus

@Glubus：看起来像全宽，保持宽高比。但如果明确说明会更好。 –

你的帖子很让人困惑，你首先提到“在图片加载之前”，然后你提到“我需要在呈现HTML之前计算这个值”。这是什么？ – rottenoats

这听起来像你已经知道图像的大小，它听起来像你想要的图像是整个窗口的宽度，只需要知道如何确定图像的高度。如果是这样，目标高度是图像高度乘以窗口宽度除以图像宽度：

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

保持高宽比。

假定图像总是比屏幕宽。让我们删除这个假设。

如果你想要的形象拉伸填充：

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

如果你不想让图像拉伸以填充：

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

来源

2017-04-12 14:29:11

不确定是否应该考虑到这点，但他提到“但我需要在呈现HTML之前计算这个值”，但他不知道他在哪里添加了脚本。否则+1 – rottenoats

'var renderedHeight = imageHeight *（windowWidth/imageWidth）;'是我需要的数学。我可能不会把这些单词正确地放在我的问题中，但那正是我所期待的。 –

在渲染之前在屏幕尺寸上计算图像尺寸

回答

相关问题