플렉스 박스 그리드의 다른 이미지의 크기로 큰 이미지 크기 조정

Question

그래서 나는 모든 포스트에 제목과 발췌 부분을 표시하는 워드 프레스 카테고리 페이지에 플렉스 박스 그리드를 가지고 있습니다. 대부분의 이미지는 키가 더 큰 몇 개를 제외하고는 같은 비율입니다. 높이 이미지의 최대 높이를 일반 이미지의 높이에 맞추고 싶습니다. 그리드의 각 항목에는 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

대박 DoDak Do'dak Do's 일부 모드에서 정답을 안내해주었습니다. 나는 컨테이너의 최대 높이를 설정해야했습니다. 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);