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

これで十分だと思います...ほとんどの場合、ブラウザ ウィンドウが 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);
于 2012-11-30T23:43:06.570 に答える