アスペクト比を維持したボックスをつくる

見栄えの問題なので本来ならばCSSで解決したい問題なのですが、data-aspect属性で縦横比を指定してJSで対応していみました。

HTML

<div class="box" data-aspect="1"></div>
<div class="box" data-aspect="0.5"></div>
<div class="box" data-aspect="0.25"></div>

JavaScript

(function(win, doc, $) {
    
    "use strict";
    
    var $aspectBoxes = $("[data-aspect]");
    
    $(function() {
        $(win).on("resize", _handleResize).trigger("resize");
    });
    
    function _handleResize() {
        $aspectBoxes.each(function(index) {
            var $aspectBox = $aspectBoxes.eq(index);
            
            $aspectBox.height($aspectBox.width() * $aspectBox.attr("data-aspect"));
        })
    }
    
})(this, document, $);

DEMO