寸法を知らずに画像を比例的に拡大する

Question

私はスクリプトを使用して、さまざまなURLからリモート画像を取得します。幅と高さは未知の変数です。

私はそれらを私のページに表示させて、私はそれぞれ55pxの高さにしています。しかし、非常に幅の広い画像（バナーなど）は全幅で表示されます。

私は画像を歪ませるので、幅と高さを制限することはできません。誰も55px（h）と75px（w）を超えないように、これらの画像を比例的に拡大する創造的な解決法を知っていますか？

p.s.私はPHPでgetimagessize（）を試みたが、関数が完了するのには時間がかかりすぎる

ありがとう！

Answer 1

私は同様の問題がありましたが、私はjQueryを使用していました。しかし、私はあなたが画像のサイズを計算するためにPHPで同じロジックを使用することができると思う。

var maxWidth = 75; // Max width for the image 
    var maxHeight = 77; // Max height for the image 
    var ratio = 0; // Used for aspect ratio 
    var width = $(this).width(); // Current image width 
    var height = $(this).height(); // Current image height 

    // Check if the current width is larger than the max 
    if(width > maxWidth){ 
     ratio = maxWidth/width; // get ratio for scaling image 
     $(this).css("width", maxWidth); // Set new width 
     $(this).css("height", height * ratio); // Scale height based on ratio 
     height = height * ratio; // Reset height to match scaled image 
     width = width * ratio; // Reset width to match scaled image 
    } 

    // Check if current height is larger than max 
    if(height > maxHeight){ 
     ratio = maxHeight/height; // get ratio for scaling image 
     $(this).css("height", maxHeight); // Set new height 
     $(this).css("width", width * ratio); // Scale width based on ratio 
     width = width * ratio; // Reset width to match scaled image 
    } 

これは何らかのヘルプです。

バー私は脳がぼんやりとした不明な画像サイズを認識しました。全体を無視してください

Answer 2

そしてねえ、あなたはいつもそれを行うためにCSSを使うことができました！このanswer explainsのように、あなたはこの機能のためのie6とおそらくie7をサポートすることを避けているでしょう（このシナリオではjavacriptやserverside phpスクリプトでサイズ変更のための条件付きコメントを使うことができます）

ところで、しかし、あなたはprogramticallyのimgを追加する必要がありますし、画像の高さを取得し、このようなオブジェクトからまっすぐ幅、その後、上記のサイズ変更機能を実行します。

var rimg = new Image(); 
    rimg.src = "yourimageserverurl"; 
    var original_height = rimg.height; 
    var original_width = rimg.width; 
    start the resize function on rimg..