フレックスボックスグリッドの他の画像のサイズに合わせて大きな画像のサイズを変更する

Question

フレックスボックスグリッドをWordpressカテゴリページに表示して、タイトルと抜粋のすべての投稿を表示します。ほとんどの画像は、同じよりもはるかに背の高いものを除いて同じ比率です。高さの高い画像の最大高さを、通常の画像の高さに応じて設定したいと思います。グリッド内の各アイテムにはimageThumbのクラスを持つイメージコンテナがあります。

(function($) { 
$('.imageThumb img').each(function() { 
    var maxHeight; 
    var width = $(this).clientWidth; // Current image width 
    var height = $(this).clientHeight; // Current image height 

    // Check if the current width is larger than the max 
    if(width > height){ 
     maxHeight = $(this).clientHeight; 
     console.log(maxHeight) 
    } 

    // Check if current height is larger than max 
    if(height > width){ 
     $(this).css("height", maxHeight); // Set new height 
    } 
}); 

})(jQuery); 

私は（幅>高さ）ビットで多すぎる高さを返すことを知っています。特定の画像をハイライトすることはできません。そのコンテンツは常に変化しており、このブログではシフトしています。

これは、これに関連する私のCSSです。

.imageThumb { 
    overflow: hidden; 
} 

.imageThumb img { 
    width: 100%; 
} 

私は、サイトの所有者が写真には、ウィンドウのサイズが大きくなるにつれてスケールアップにしておきたいので）（私の元の溶液）画像の幅と高さを設定する必要はありません。私はまた、イメージを絶対的に配置し、コンテナ内に収まるように設定しようとしましたが、この状況では動作していないようです。この問題のための最善の行動方針が何であるかはわかりません。

ありがとうございます！

Answer 1

こんにちは私はよく分かっているのか分かりませんが、あなたのリンクを見せてください。私は、このコードは、ジョブ

var maxHeight = 0; 

$('.imageThumb img').each(function(){ 
    var thisH = $(this).height(); 
    if (thisH > maxHeight) { maxHeight = thisH; } 
}); 

$('.imageThumb img').height(maxHeight); 

歓声を作るためにすべきだと思いますところで

!!

Answer 2

大バックはいくつかの改造で正しい答えに私を導いた。私は、コンテナimageThumbの最大高さを設定して、幅が他の写真と同じになり、背の高い写真を歪ませないようにする必要がありました。それがあなたの写真をあまりにも断ち切ってしまった場合、あなたはコメントされたコードを試すことができます。

var maxHeight = 0; 

$('.imageThumb').each(function(){ 
    var thisH = $(this).height(); 
    if (thisH > maxHeight) { 
    maxHeight = thisH; 
    $('.imageThumb').css('maxHeight', maxHeight); 
    //may need to change to the following if pics are getting cut off too much 
    // $('.imageThumb img').css('maxHeight', maxHeight); 
    // // $('.imageThumb img').css('width', 'auto'); 

    } 
}); 

上記のコードは、私がする必要があるすべてのために働いていなかったので、以下のコードも参照してください。フィードバック歓迎！

var imageThumb = document.getElementsByClassName('imageThumb'); 
var arr=[]; 
var tallArr=[]; 
//add all items to an array 
$(".imageThumb").each(function(){ arr.push($(this));}); 
//filter out all items that are taller than they are wide 
arr.filter(function(obj){ 
    if(obj.context.clientHeight > obj.context.clientWidth) { 
    tallArr.push(obj); 
    } 
}); 


//loop through the items that are tall and add a new class to them 
for (i = 0; i <= tallArr.length; i++) { 
    $(tallArr[i]).addClass('bigHeight'); 
} 
//gets first item that has a normal height and grabs it's height value 
var normalHeight = arr[0].context.clientHeight; 
//change css of bigHeight 

//sets bigHeight equal to normalHeight 
$('.bigHeight').css('max-height', normalHeight);