0

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

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

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

4

2 回答 2

0

正如@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-22T06:01:36.313 回答
0

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

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

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

于 2013-04-22T18:00:19.030 回答