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

【问题标题】：Resizing image regarding browser window without distortion调整有关浏览器窗口的图像大小而不失真
【发布时间】：2012-11-30 23:01:33
【问题描述】：

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

【问题讨论】：

问题是？此外，将该调整大小函数也放在 DOM 就绪函数中。
它根本没有调整大小
试试：$("#str").height(500); 吗？
它没有用@adeneo
@adeneo 这个操作的逻辑肯定很奇怪..

标签： jquery browser resize window autoresize

【解决方案1】：

前段时间，我在一个项目中需要这个，我在 SO 找到了很多关于这个主题的资源（几乎可以肯定这是一个重复的问题），但我们开始吧： p>

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

【讨论】：

但是当图像高度
是的，你是对的！但你有变量，只有 2 行，所以......功课；）
:( .. 其实我有很多 :D
@SPrince：我在我的代码中发现了一些问题，检查更新和this fiddle
不客气。如果你想了解更多关于检查这个可怕的tutorial

【解决方案2】：

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

【讨论】：