0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ウィンドウにイベントを設定して高さを算出する

Posted at

heightを数値で指定したくない/できない時に。

ウィンドウのサイズが変わったのを検知して、ギャラリーの高さを横幅から計算して設定する。

$(window).resize(function () {

   var $g = $('.gallery'),
        $galleryWidth = $g.width(),
        $height = $galleryWidth * .7;

   $g.css('height', $height + 'px');

});

これだとデベロッパーツールで見たときはいい感じだけど、ウィンドウのサイズを変えるというのは普段ネットを使っててもしないので、スクロールを検知させることにした。

$(window).scroll(function () {

   var $g = $('.gallery'),
        $galleryWidth = $g.width(),
        $height = $galleryWidth * .7;

   $g.css('height', $height + 'px');

});

表示された瞬間はいい感じの高さで表示されないけど、スクロールすると自動で調整してくれるので便利。
cssにはあらかじめ%などで数字を入れておく。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?