レンダリング前の画面サイズで画像の大きさを計算する

Question

画像がレンダリングされる前に画面の解像度に応じて画像のサイズがどのように計算/見積もられるのでしょうか？私は正直であるためにコードではなく、より論理的な助けが必要です。計算には何が必要ですか？

画像サイズ：450px * 800ピクセル

ウィンドウのサイズ：* 728px 424px

画像は* 239px 424pxになるように動作します。コード内でこれを計算する必要があるので、後に続く他の要素（絶対/固定要素）の位置を調整できます。

私がこれまで行ってきたことは、

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 

次は何ですか？

Answer 1

イメージのサイズがわかっているように聞こえますが、イメージがウィンドウの全幅になるように聞こえますが、イメージの高さを決定する方法を知る必要があります。

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); 
}