调整窗口大小时jquery图像调整大小答案

【问题标题】：jquery image resize when window is resized调整窗口大小时jquery图像调整大小
【发布时间】：2013-04-22 05:52:59
【问题描述】：

我一直在寻找和即兴创作并想出这个：

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

该代码是否正确，因为它应该做的是在调整窗口大小时检测图像是纵向还是横向并调整其大小以使其完全适合屏幕。

【问题讨论】：

你只定义了函数，没有执行。
你应该把函数放在resize事件之外，然后在事件中调用它。

标签： jquery css image resize

【解决方案1】：

正如 @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.

【讨论】：

谢谢！好的，您知道如何在 wordpress 页面上实现此功能吗？像这样的东西：
知道（第二个版本）在 WP 上工作，但仍然没有什么问题。 - 页面加载后如何立即执行？ - 如果图像是纵向比例，则当窗口的宽度调整到足够大时，宽度将超出比例（太窄） - 如果图像是横向比例，则在调整屏幕高度时高度根本不会缩放。跨度>
更正。如果图像是纵向比例，当窗口宽度调整到足够薄时，它会向下跳转，使页面可滚动。但是，如果您随后减小窗口高度，图像会再次弹出，因为它的宽度现在随着窗口高度而减小。

【解决方案2】：

我以某种方式让它按预期工作，这是目前为止的最终代码：

$(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

加载页面时图像也会闪烁。我可以原谅，但比例需要固定。

【讨论】：