Question

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

img采用（宽度：100％），因此其高度将大于浏览器窗口。当图像高度为＆lt; =浏览器窗口时，它将停止调整大小，否则它将重新调整大小。

如此;它不起作用!!

这是我的代码：

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

Answer 1

前段时间，我需要一个项目，我在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

Answer 2

我相信这就是您所需要的......只需检查浏览器窗口是否小于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);

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

2 个答案:

HTML

Jquery的

CSS：