1

ブラウザウィンドウが縮小されている場合は、divとその中の画像も縮小する必要があります。しかし、それは真ん中にとどまり、常に同じ比率を維持する必要があります。これは可能ですか？私は何年もの間運がなくて努力してきました。必要に応じて、jQueryまたはJSを使用できます。

ここに画像の説明を入力してください

4

2 に答える 2

3

次のようなものを使用できます（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>
于 2012-09-22T16:41:27.037 に答える
0

一般的な考え方は次のようになります

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は使用可能なすべてのスペースを占め、それに応じてサイズを変更します。明らかに、そこにあるすべての詳細は恣意的であり、あなたの特定の設計に完全に依存します。私はあなたがそれが実際に動いているのを見ることができるフィドルを設置しました。

編集：モバイルデバイスでコーシャを維持するビューポートメタタグを忘れました。

于 2012-09-22T16:11:40.137 に答える