在渲染之前在屏幕尺寸上計算圖像尺寸

-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）;'是我需要的數學。我可能不會把這些單詞正確地放在我的問題中，但那正是我所期待的。 –

在渲染之前在屏幕尺寸上計算圖像尺寸

回答

相關問題