2

私はウェブサイトをレスポンシブにするために取り組んでいます。すべての div に自動高さを使用しました。ただし、特定の div については、ブラウザーのすべてのサイズに対して固定の高さを使用する必要があります。ただし、すべてのサイズのデバイス/ブラウザーのメディア クエリで手動で高さを設定する代わりに、自動的に/動的に実行したいと考えています。javascript/jQueryでできるかもしれません。しかし、javascript/jQuery についての知識はあまりありません。だから、私はあなたの助けが欲しいです。私のコンテナ div の max-width: 1280px; 初期寸法が1065 * 695pxの「#artwork」という名前の子divがあります。コンテナ div の最大幅と #artwork div の初期高さを base として、ブラウザのサイズ変更ごとに #artwork に自動高さを与えたいと考えています。

「#artwork」div には大きな画像がたくさんあるため、「#artwork」に height: auto を指定することはできません。しかし、javascript では、通常は 1 つの画像しか表示されず、下にスクロールすると、次の画像が 1 つずつ表示されます。height: auto を指定するか、「#artwork」に minimum-height を使用すると、すべての画像が表示されます。メディア クエリによって、さまざまな種類の css ファイルに「アートワーク」の div の高さを手動で設定しました。しかし、私はそれを自動的に行いたいので、比率はすべてのデバイスのすべてのサイズのブラウザーに最適です。

ページの例は次のとおりです:
[デッドリンクは削除されました]

#container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0;
   overflow: hidden;
   font-family: GandhiSansBold;
   position: relative;
}

#artwork {
   /*width: 1065px;*/
   width: 83.203%;
   height: 695px;
   margin: 0;
   float: left;
   overflow: hidden;
   margin-bottom: 10px;
}

ブラウザのサイズが非常に大きい場合、#artwork の高さが、自動リサイズによっていずれの場合でも height:695px を超えることはありませんのでご安心ください。

4

3 に答える 3

0

サイズ変更時にブラウザーの新しい高さをカウントし、新しい高さを画像に設定する必要があります。

var TO = false;
var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
$(window).bind(resizeEvent, function() {
  TO && clearTimeout(TO);
  TO = setTimeout(resizeImage, 200);
});
function resizeImage(){
  // browser resized, we count new width/height of browser after resizing
  var height = window.innerHeight || $(window).height();
  // var width = window.innerWidth || $(window).width();
  // you need to change here #artwork height
  var imgHeightInPercent = 30; // browser height is 100%
  var desiredHeight = (height * imgHeightInPercent) / 100;
  // finally we changed #artwork height
  $('#artwork').height(desiredHeight); 
}
于 2013-04-16T20:12:59.197 に答える