0

我有一个 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>
4

2 回答 2

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

于 2012-11-30T23:26:07.440 回答
0

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

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);
于 2012-11-30T23:43:06.570 回答