在視口內並置2個圖像，保持圖像比例並應用相同的高度

我需要並置2個隨機圖像，它們都具有動態高度和寬度。這兩幅圖像應該佔據瀏覽器窗口中可用的所有寬度，並且兩幅圖像應該具有與瀏覽器窗口相同的高度（例如，適合兩幅尺寸不同的圖像的唯一方法就是調整它們的寬度）。在視口內並置2個圖像，保持圖像比例並應用相同的高度

這是我如何計算每個圖像的比例：

var ratio = [maxWidth/srcWidth, maxHeight/srcHeight]; 
return ratio = Math.min(ratio[0], ratio[1]);

視口也可能會有所不同的大小，我需要拿出一個解決方案，也將工作，如果的高度窗口大於寬度。

我現在只能想象出一些非常複雜的解決方案，我該如何簡化它呢？

來源

2014-02-06 PHearst

你的代碼似乎很好......問題是什麼？ – GameAlchemist

GameAlchemis @更新問題 – PHearst

除非您接受修改寬高比，否則無法填充全高和全寬。問題1：你想a）全寬，最大高度b）全高，最大寬度c）最大面積（= a或b，取決於圖像和窗口）？問題2：兩張圖像可以有兩種不同的比例嗎？ – GameAlchemist

讓我們假設圖像是由w1和h1通過w2h2，一個屏幕是ws通過hs。然後重新調整圖像2，其尺寸爲w2*h1/h2由h1。圖像高度與屏幕高度的比率爲h1/hs，而總寬度與屏幕寬度的比率爲(w1+w2*h1/h2)/ws。其中較大的一個是我們想要減少的比率（第一個圖像 - 第二個圖像重新縮放然後縮小）。如果第一個參數較大，則意味着圖像太高，我們會在邊上留出一些空白區域。如果第二個參數較大，我們會在上面或下面留出空白。在javascript：

var heightRatio = image1.height/screenheight; 
var widthRatio = (image1.width+image2.width*image1.height/image2.height)/screenwidth; 
var ratio = Math.max(heightRatio,widthRatio); 
image2.width *= image1.height/(image2.height*ratio); 
image1.height /= ratio; 
image1.width /= ratio; 
image2.height = image1.height;

你也可以改變這些順序，並得到

image1.height /= ratio; 
image1.width /= ratio; 
image2.width *= image1.height/image2.height; 
image2.height = image1.height;

但我發現，以不太清楚發生了什麼。

來源

2014-02-11 21:01:28 Teepeemm

我昨天知道了，但你的解決方案更短。謝謝。 – PHearst

在視口內並置2個圖像，保持圖像比例並應用相同的高度

回答

相關問題