jQueryを使用して、レスポンシブに要素を同じ比率のまま拡大・縮小する方法。
jQueryのcssプロパティを使用して、adjustHeightというclassをつけた要素が変更されるようにします。
$(window).on('resize load', function() {
$('.adjustHeight').each(function() {
var item = $(this),
w = item.width(),
h = w * 比率
/* 合わせたい比率によって数値を変える
* 2:1 -> 0.5
* 4:3 -> 0.75
* 16:9 -> 0.563
*/
item.css('height', h);
})
})
resizeするたびに動くのであまりよろしくはないかもしれません。
追記
cssでaspect-ratioを使えばパフォーマンス的にも良いのでjQueryで実現させることがそもそも必要ないかもしれませんね。