세로 이미지의 크기 만 조절

Question

세로 스크롤하는 사진 갤러리에 문제가 있습니다. 세로 이미지의 크기를 조정하려고하지만 가로 이미지는 그대로 유지하는 것이 좋습니다. 가로 이미지의 너비는 900px이고 세로 이미지는보기 편한 화면의 경우 너무 높을 수 있으므로 440px 너비의 세로 이미지 두 개와 한 개의 가로 아래에 맞도록 20px의 중앙 여백이 필요합니다.

웹 사이트는 Cargocollective에 있으므로 PHP는 사용할 수 없으며 Jquery, Javascript 및 CSS 만 사용할 수 있습니다. 그리고 HTML 만 추가 할 수 있습니다. 누구나 해결책이 있습니까?

이미지의 비율을 검출하고 높이> jQuery를 1.7

감사

Answer 1

$('img').each(function(i,obj){ 
    if($(obj).height() > $(obj).width()){ 
     //portrait, resize accordingly 
    }else{ 
     //landscape display; the default you want. 
    } 
}); 

폭 이상, 우리는를 사용하지 않고 각 영상의 특성에 접근 할 수있는 경우에만 크기를 조정하는 방법 $ 반복자마다. 높이/폭이 계산 될 때

$('img').prop('height', function(){ 
    if($(this).height() > $(this).width()){ 
     //portrait, resize accordingly 
    }else{ 
     //landscape display; the default you want. 
    } 
}); 

Answer 2

확인 화상을 OhGodwhy, 응답의 변화가 로딩된다.

$('#myElement img').load(function(){ 
    if($(this).height() > $(this).width()){ 
     //portrait, resize accordingly 
     var width = $(this).width(); 
     var height = $(this).height(); 
     var newWidth = 400; 
     var newHeight = newWidth * (height/width); 
     $(this).width(newWidth).height(newHeight); 
    }else{ 
     //landscape display; the default you want. 
    } 
});