画像が四角形内に収まる最大サイズの決定

Question

私は、特定の四角形内で画像のアスペクト比を維持しながら絶対最大サイズを決定するために使用している関数を持っています。私が現在使っているコードは間違っていますが、どこが間違っているのか分かりません。

// Sets the image to the largest proportional size possible 
// based on the current browser window dimensions and original 
// image size specified by the image loader 
function applyLargestProportionalSize() { 
    var maxWidth = <width of container>; 
    var maxHeight = <height of container>; 

    var realWidth = <actual image width>; 
    var realHeight = <actual image height>; 

    if (realWidth < realHeight && maxWidth > maxHeight) { 
     var scaledWidth = Math.min(realWidth, maxWidth); 
     $('img').css('width', scaledWidth); 
     // let height be determined by the browser 
    } else { 
     var scaledHeight = Math.min(realHeight, maxHeight); 
     $('img').css('height', scaledHeight); 
     // let width be determined by the browser 
    } 
} 

Answer 1

私はJavaScriptを知らないが、問題はあなたのコードは、コンテナのアスペクト比が1未満である場合のみを扱うことができるということであり、画像のアスペクト比が1よりも大きいです（または、私はそれを後方に持っているかもしれませんが、アスペクト比の正確な定義についてはわかりません）。これを試してみてください：

if (realWidth/realHeight > maxWidth/maxHeight) { 
    // everything else the same 

Answer 2

スケール画像の大きさを2例のために：

1. あなたは、コンテナのを一致させるには幅

   scaled_width = image_width * container_height/image_height 
   scaled_height = container_height 
   

2. を取得した場合には、コンテナの高さを、一致させるには幅は、その場合、あなたは高さを得る

   scaled_height = image_height * container_width/image_width 
   scaled_width = container_width 
   

次に、計算された寸法がコンテナ内に収まる最初のものを選択します。

画像とコンテナが同じアスペクト比である場合、両方が適合します。

画像がコンテナよりも狭い場合は、最初の画像だけが収まります。

画像がコンテナよりも広い場合は、2番目の画像だけが収まります。