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

Question

如果浏览器窗口缩小了，那么我希望 div 和其中的图像也缩小。但它必须保持在中间，并且始终保持相同的比例。这可能吗？我已经尝试了很长时间没有运气。如有必要，我愿意使用 jQuery 或 JS。

Answer 1

你可以使用这样的东西（使用 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>

Answer 2

一般的想法是这样的

HTML 头部：

<meta name="viewport" content="width=device-width">

和身体：

<div class="container">
  <img src="whatever.jpg"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

和CSS：

.container {
  width: 90%;
  max-width: 480px; 
  background: #900;
  margin: 1em auto;    
}
.container img {
  display: block;
  width: 100%;
  margin: 1em auto;    
}

基本上，容器 div 占据了可用宽度的 90%，最大为 480px，容器内的 img 占据了它所有可用的空间，并相应地调整大小。显然，所有细节都是任意的，完全取决于您的特定设计。我设置了一个fiddle，您可以在其中看到它的运行情况。

编辑：忘记了在移动设备上保持洁净的视口元标记。