jQuery的图像尺寸时，窗口大小

我一直在寻找和即兴发挥，并拿出这样的：jQuery的图像尺寸时，窗口大小

$(window).resize(function() { 
    function imgResize() 
    { 
     if ($("#post_container img").width() > $("#post_container img").height()){ 
      $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
      } 
     else if ($("#post_container img").width() < $("#post_container img").height()){ 
      $('#post_container img').css({ 'width': 'auto', 'height': '80%' }); 
      } 
     else { 
      $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
      } 
    } 
})

是这样的代码，甚至正确的，因为它应该做的是调整检测窗口时，如果图像肖像或风景，并调整它的大小，使其完全适合屏幕。

来源

2013-04-22 user2264516

您只定义了该功能，但未执行该功能。 – Terry 2013-04-22 05:54:43

您应该将此功能放在'resize'事件之外，并在事件内部调用它。 – Vishal 2013-04-22 05:56:34

由于@terry提到你已经定义了一个功能，但不执行它，你可以做到这一点外移动功能，并调用它这样什么：

function imgResize(){ 
    if ($("#post_container img").width() > $("#post_container img").height()){ 
     $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
    } else if ($("#post_container img").width() < $("#post_container img").height()){ 
     $('#post_container img').css({ 'width': 'auto', 'height': '80%' }); 
    } else { 
     $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
    } 
} 
$(window).resize(function() { 
    imgResize(); 
}).resize(); //<-----------this will execute when page gets ready.

或者另一种选择是将所有在.resize()处理函数：

$(window).resize(function() { 
    if ($("#post_container img").width() > $("#post_container img").height()){ 
     $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
    } else if ($("#post_container img").width() < $("#post_container img").height()){ 
     $('#post_container img').css({ 'width': 'auto', 'height': '80%' }); 
    } else { 
     $('#post_container img').css({ 'width': '80%', 'height': 'auto' }); 
    } 
}).resize(); //<-----------this will execute when page gets ready.

来源

2013-04-22 06:01:36 Jai

谢谢！好吧你有什么想法如何在wordpress页面上实现这一点？就像这样： – user2264516 2013-04-22 06:19:31

知道WP（第二个版本），但仍然有一些问题。 - 如何在页面加载时立即执行此操作？ - 如果图像是纵向比例，当窗口宽度足够大时，宽度将超出比率（太细） - 如果图像是横向比例，如果调整屏幕高度的大小，高度根本不会缩放。 – user2264516 2013-04-22 07:07:51

正确。如果图像是纵向比例，则会跳到窗口宽度调整为足够薄时使页面可滚动。但是如果你减小窗口高度，图像会再次弹出，因为它的宽度现在随着窗口高度而下降。 – user2264516 2013-04-22 08:06:55

我不知怎么把它作为预期工作，这里是最后的代码至今：

$(window).load(function(){ 
    imgResize(); 
    $(window).on('resize', imgResize); 
}); 


    function imgResize(){ 

     var sW = $("#right_column_post").width(); 
     var sH = $(window).height(); 
     var iW = $("#post_container img").width(); 
     var iH = $("#post_container img").height(); 
     var eW = sW - iW; // horizontal space 
     var eH = sH - iH; // vertical space 

     if(eW > eH){ // more horizontal space 
      $("#post_container img").css("height", (sH * 0.7)); 
      $("#post_container img").css("width", 'auto'); 

     } else if (eW < eH){ // more vertical space 
      $("#post_container img").css("height", 'auto'); 
      $("#post_container img").css("width", (sW * 0.7)); 
     } else { // as much space 
      $("#post_container img").css("height", 'auto'); 
      $("#post_container img").css("width", (sW * 0.7)); 
     } 


    }

它几乎工作，但你可以看到对处于横向比的图像比例失真一会儿图像减少窗口宽度时：

http://tomiphotography.com/?p=158

的图像也装载时flicer位页。我可以原谅，但比例需要修正。

来源

2013-04-22 18:00:19 user2264516

jQuery的图像尺寸时，窗口大小

回答

相关问题