1

お客様が欲しいという特例をいじっています。昔は、ファイルのwidths とs を指定するだけでスケールアップとスケールダウンが非常に簡単な Flash の利点を誰もが知っていました。height

まさにこれが、div-wrapper でやりたいことです。この図に見られる ように、これは入力ページに似ています。私がアーカイブしたいのは、ブラウザウィンドウがすべての正方形を同じアスペクト比に保ち、小さくしたり大きくしたりする場合です。

背景画像で div を使用していて、マークアップが次のようなものであると仮定します。

<body>
 <div id="wrapper">
  <div id="pic1"></div>
  <div id="pic2"></div>
  <!-- and so on -->
 </div>
</body>

これを可能にする解決策はありますcssか？jqueryどんなヒントでも大歓迎です。ありがとう

4

4 に答える 4

3

これは Javascript または CSS で行うことができます。ただし、テキストの調整には Javascript を使用することをお勧めしますが、完全なブラウザー互換性と確実な有効性が必要な場合は、実行中の操作を適切に制御できるプラグインを使用する必要があります (プラグインを使用せずにビルドすると、不要な時間がかかる可能性があります)。 .

CSS を介しwidthて、画像とheightパーセンテージrelativeを本文の合計サイズに関連付けることができます。

例: JSfiddle

html, body{
   width:100%;
   height:100%;
}
img{
   position:relative;
   width:50%;
   height:100%;
}

Javascript を介して、次のようなさまざまなプラグインから選択できます。

より詳細な情報については、これをチェックしてください：

于 2013-09-19T16:44:50.127 に答える
0

各画像 div に、pic_class流動的な % 幅と高さの値が設定されたクラスを指定します。次のようなcssファイルの何か：.pic_class{width:33%; height: 33%}

于 2013-09-19T16:45:57.857 に答える
0

CSS または jQuery を使用して実行できます。

CSS

html,body {
    height: 100%;
}
#wrapper{
    width: 100%;
    height: 100%;
}

実際の例: http://jsfiddle.net/ASfUk/ jQuery

var windowsWidtdh = $(window).width();
var windowsHeight = $(window).height();
$('#wrapper').css('width', windowsWith + 'px');
$('#wrapper').css('height', windowsHeight + 'px');
于 2013-09-19T16:46:39.803 に答える