jquery - 如何在保持比例的同时将div扩展到浏览器的高度或宽度？ [内部图]

如果浏览器窗口缩小，那么我也希望div和其中的图像缩小。但是它必须停留在中间，并且始终保持相同的比例。这可能吗？我多年来一直没有运气。如果需要，我愿意使用jQuery或JS。

最佳答案

您可以使用类似以下内容(使用jQuery):

<script language="jscript">
    $(function(){
        ratio=$('#centerdiv').width()/$('#centerdiv').height();
        rePos=function(){
            if($('#container').innerHeight()*ratio>$('#container').innerWidth()){
                $('#centerdiv').width($('#container').innerWidth());
                $('#centerdiv').height($('#centerdiv').width()/ratio);
                $('#centerdiv').offset({left:0,top:($('#container').innerHeight()-$('#centerdiv').outerHeight(true))/2});
            }
            else{
                $('#centerdiv').height($('#container').innerHeight());
                $('#centerdiv').width($('#centerdiv').height()*ratio);
                $('#centerdiv').offset({left:($('#container').innerWidth()-$('#centerdiv').outerWidth(true))/2,top:0});
            }
        };
        $(window).resize(rePos);
        rePos();
    });
    </script>
    <div id="container" style="position:absolute;top:0;bottom:0;left:0;right:0">
    <div id="centerdiv" style="position:absolute;width:150px;height:100px;background-color:red;padding:0;border:0;margin:0"></div>