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にはあらかじめ%などで数字を入れておく。