如何擴大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％的可用寬度的，最多的480像素，並且在容器內的IMG佔用所有可用的空間給它，因此調整大小。顯然，所有的細節都是任意的，完全取決於你的特定設計。我設置了一個fiddle，您可以在其中看到它的實際操作。

編輯：忘記了視口元標記，它保留了移動設備上的東西。