jquery multiple img同じ高さの固定された高さのコンテナを充填する

Question

この問題は解決しやすいと確信していましたが、数時間の検索の後に最終的にいくつかの助けを見つけるために投稿します。

私は固定された高さと幅のコンテナを持っています。大きな列と見なしましょう。

そこには3つの画像が表示され、それぞれ異なるサイズがあります。サイズが変わることがあります。

画像を縦方向に塗り潰す（水平に塗りつぶす必要はありません）ようにサイズを変更し、すべての幅を同じにしたいと思います。 （「列」の外観の場合）

これを水平に実行するためのjqueryプラグインのソリューションが見つかりました：jpictura。 3枚の写真を撮り、できるだけ大きく、同じ高さで表示して、正確に行を塗りつぶします。

しかし今、私は同じものを探していますが、水平ではなく垂直で探しています。

1000pxの高さと800pxの最大幅のコンテナを考えてみましょう。それに表示する そして3画像： IMG1：800ピクセル* 1600px IMG2：* 800ピクセル300ピクセル、 IMG3：* 1600px 1800px

私の論理は（jqueryのでは）これらの手順に従うことを私に言う：

1. 3つの画像の高さの合計がコンテナの幅の100％の場合に計算します。

2. コンテナの高さに合うように高さをどれだけ減らす必要があるかを計算します。

3. この割合に従って各画像サイズを縮小します。

しかし、私は疑問でいっぱいだ...

そしておそらくjQueryプラグインは、クリーンで安定した方法でこれを行うために存在します。しかしそれはそれを見つけることができなかった私だけです？ または最悪！私はそれを見つけて試してみましたが、それを良い方法で使うことはできませんでした.. ^^

何か考えていますか？

おかげ

[編集]ここで私が何をしたいかを示すために、いくつかのexemplesです。画像は、コンテナの高さを100％としていますが、すべて同じ幅を持ち、比率を失うことはありません。

Answer 1

私は最終的にないので、難しい最終的に私は機能が最適化されることができますね:)

、私はjqueryのための専門家ではないよ、小さなスクリプトを書きました... とにかくそれは私の仕事です：すべての画像を取り、同じ幅を与え、列の全高に合わせてください。 精度：私の場合は、PDF上にうまく写真を表示するために使用したので、私のA4 pdfコンテンツに対応する固定幅と高さの値を得ました。 表示しようとする画像の数に関係なく動作します。

JS：

function setImagesToFillAColumn() { 
    var maxWidth = 735; 
    var totalHeight = 0; 
    var availableHeight = 980; 

    //set all images to this max width and calculate total height 
    $('.pdf-a-column-images-container > img').each(function(){ 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 
     var ratio = height/width; 
     var newHeight = maxWidth * ratio; 
     $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes 
     $(this).css("height", newHeight+'px').css("width", maxWidth+'px'); // change css attributes 
     totalHeight = totalHeight + newHeight; 
    }); 

    //calculate the reduction purcentage neddded for all the images fit to the row 
    var purcentageReduction = availableHeight/totalHeight; 

    if (purcentageReduction < 1) { 
     //reduce to this purcentage for all image size 
     $('.pdf-a-column-images-container > img').each(function(){ 
      var finalHeight = $(this).height() * purcentageReduction; 
      var finalWidth = $(this).width() * purcentageReduction; 
      $(this).css("height", finalHeight+'px').css("width", finalWidth+'px'); // change css attributes 
     }); 
    } 
} 

とHTML、非常に簡単：

<div class="pdf-a-column-images-container"> 
    <img src="urltoimg1" /> 
    <img src="urltoimg2" /> 
    <img src="urltoimg3" /> 
    <img src="urltoimg4" /> 
</div> 

別の使用のために、私の代わりに、列の（水平方向）と同じ機能をしたが、行上の画像に合わせて。 同じ高さで、行の100％をとって、私が1行で与えるイメージを表示します。

JS：

function setImagesToFillARow() { 
    var maxHeight = null; 
    var totalWidth = 0; 
    var availableWidth = 735; 
    //get the less high image height 
    $('.pdf-a-row-images-container > img').each(function(){ 
     if (maxHeight === null || $(this).height() < maxHeight) { 
      maxHeight = $(this).height(); 
     } 
    }); 

    //set all images to this height and calculate total width 
    $('.pdf-a-row-images-container > img').each(function(){ 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 
     var ratio = height/width; 
     var newWidth = maxHeight/ratio; 
     $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes 
     $(this).css("width", newWidth+'px').css("height", maxHeight+'px'); // change css attributes 
     totalWidth = totalWidth + newWidth; 
    }); 

    //calculate the reduction purcentage neddded for all the images fit to the row 
    var purcentageReduction = availableWidth/totalWidth; 
    var finalHeight = maxHeight * purcentageReduction; 
    //set images container to the new height 
    $('.pdf-a-row-images-container').css('height', finalHeight+'px'); 

    //reduce to this purcentage all image size 
    $('.pdf-a-row-images-container > img').each(function(){ 
     var finalWidth = $(this).width() * purcentageReduction; 
     $(this).css("width", finalWidth+'px').css("height", finalHeight+'px'); // change css attributes 
    }); 
} 

とHTML：

<div class="pdf-a-row-images-container"> 
    <img src="urltoimg1" /> 
    <img src="urltoimg2" /> 
    <img src="urltoimg3" /> 
    <img src="urltoimg4" /> 
</div> 

そして仕上げのために、行と列の表示に使用fewcssルール、：

.pdf-a-row-images-container { 
    white-space: nowrap; 
    line-height: 0; 
    font-size: 3px; 
} 
.pdf-a-column-images-container { 
    white-space: nowrap; 
    line-height: 1px; 
    padding-top: 25px; 
} 
.pdf-a-column-images-container img { 
    display: block; 
    margin: 1px auto; 
    padding: 0; 
} 

私はそれが遠くから知っています完璧ですが、それが助けることができる場合:)