Question

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

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

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

Answer 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.

Answer 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

加载页面时图像也会闪烁一些。我可以原谅，但比例需要修复。

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

2 个答案: