调整浏览器窗口的图像大小而不失真

时间:2012-11-30 23:01:34

标签: jquery browser resize window autoresize

我有一个img标签,我想在浏览器窗口上重新调整大小,没有失真。

img采用(宽度:100%),因此其高度将大于浏览器窗口。 当图像高度为< =浏览器窗口时,它将停止调整大小,否则它将重新调整大小。

如此;它不起作用!!

这是我的代码:

<html>
<head>
<title>testawy</title>
</head>
<style type="text/css">
body
{
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<body>
<img id="str" src="stretch.jpg">
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
    $("#str").width($(window).width());
});

$(window).resize(function(){
    var x = $(window).height();
    var y = $("#str").height();

    if (y <= x)
    {
        $("#str").height('500px');
    }
    else
    {
        $("#str").width($(window).width());
    }
});
</script>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

前段时间,我需要一个项目,我在SO 找到了很多关于这个主题的资源(几乎可以肯定这是一个重复的问题),但是我们走了:

HTML

<img src="images/bg.jpg" id="bg" alt="">

Jquery的

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");
});

CSS:

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

小提琴: http://jsfiddle.net/7Qcfy/3/

编辑:你是对的,我的代码几乎没有问题,这是明确的答案......正是你在寻找的东西:D

答案 1 :(得分:0)

我相信这就是您所需要的......只需检查浏览器窗口是否小于500px。

function resizeIt() {

    var x = $(window).height();

    if ( x <= 500 ) {
        $("#str").attr('height', '500px').removeAttr('width');
    } else {
        $("#str").attr('width', '100%').removeAttr('height');
    }

}

resizeIt();


$(window).on('resize', resizeIt);