只調整垂直圖像

Question

我有一個垂直滾動照片庫的問題， 我想垂直圖像調整大小，但水平圖像很好的方式。 水平圖像的寬度爲900px，垂直圖像太高而不能舒適地觀看屏幕，所以我想要兩個440px寬度的垂直圖像和20px的中心邊緣以適合低於一個水平線。

該網站是在Cargcollective，所以我不能使用PHP，只有JQuery的，Javascript和CSS 而我只能在HTML上添加。 任何人都有解決方案？

以檢測所述圖像的比，然後才調整如果高度>寬度

由於

Answer 1

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

jQuery的1.7以上，我們可以在不使用訪問每個圖像的屬性的方式$ .each迭代器。

$('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. 
    } 
});