jquery - 有没有办法调整 div 的大小，并保持其内容的纵横比？

Question

我的一位客户想要一个小表格，最终看起来像这样(请忽略可调整大小的 Angular ，只是一些测试):

鉴于他的要求，我需要让它适合背景图像，所以 494px。但是，他将它集成到一个小部件风格的应用程序中，每个小部件都可以调整大小。

特别是对于这个元素，我认为我可以使用 max-width 属性并玩弄百分比；但我想知道是否有一种方法可以调整 div 及其内容的大小，以便一切都保持纵横比。这样，如果我减小 div 的宽度/高度，我将得到更小的文本和边距。

我没有找到任何 jquery 插件来做到这一点，所以我尝试开发一个概念验证来检查主要困难(参见 jsfiddle 和/或下面的代码)。这有点错误，但您可以通过慢慢调整黑色 div 的大小来理解我的意思。

所以这是我的问题:

Is there a way to resize a div, preserving aspect ratio of its content?

您可以看到以下 fiddle :http://jsfiddle.net/8Vhn3/

代码:

CSS

#container {
    width: 200px;
    height: 200px;
    border: 5px solid black;
}

#text {
    font-size: 24px;
    margin-left: 10px;
}

#some-content {
    width: 50px;
    height: 50px;
    border: 3px solid red;
}

HTML

<div id="container">
    <p id="text">some text</p>
    <div id="some-content"></div>
</div>

JavaScript(jQuery、jQuery UI)

$(document).ready(function() {
    $('#container').resizable({
        resize: function(e, ui) {
            var el = ui.element;
            el.super_resize(ui.originalSize, ui.size);
        }
    });
});

;(function($, window) {

    $.fn.super_resize = function(originalSize, currentSize) {

        var that = $(this);

        if (that.data('last-width') === undefined) {
            that.data('last-width', originalSize.width);
        }
        var lastWidth = that.data('last-width');

        if (that.data('last-height') === undefined) {
            that.data('last-height', originalSize.height);
        }
        var lastHeight = that.data('last-height');

        var ratio_w = currentSize.width / lastWidth;
        var ratio_h = currentSize.height / lastHeight;

        that.data('last-width', currentSize.width);
        that.data('last-height', currentSize.height);

        var cssPropertiesWidth = [
            'width', 'margin-left'
        ];

        var cssPropertiesHeight = [
            'height' 
        ];

        var cssPropertiesAvgRatios = [
            'border', 'font-size'
        ];

        var recursiveResize = function(data, ratio_w, ratio_h) {

            $.each(cssPropertiesWidth, function(i, property) {
                var oldValue = data.css(property);
                if (!oldValue) {
                    return true;
                }
                var newValue = parseInt(oldValue) * ratio_w;
                data.css(property, newValue + 'px');
            });

            $.each(cssPropertiesHeight, function(i, property) {
                var oldValue = data.css(property);
                if (!oldValue) {
                    return true;
                }
                var newValue = parseInt(oldValue) * ratio_h;
                data.css(property, newValue + 'px');
            });

            $.each(cssPropertiesAvgRatios, function(i, property) {
                var oldValue = data.css(property);
                if (!oldValue) {
                    return true;
                }
                var newValue = parseInt(oldValue) * ((ratio_w + ratio_h) / 2);
                data.css(property, newValue + 'px');
            });

            data.children().each(function() {
                recursiveResize($(this), ratio_w, ratio_h);
            });

        }; // recursiveResize

        recursiveResize($(this), ratio_w, ratio_h);

    }; // $.fn.super_resize

})(jQuery, window);

Answer 1

关键是填充。

当以 % 定义时，填充取决于包含元素的宽度。

例如，如果 padding-top: 10%; 您实际上是在说 padding top 应该是特定元素宽度的 10%。

width: 20%;
height: 0;
padding-bottom: 20%;

高度需要为零，以便从设置的内边距生成高度。

---

为了进一步阅读，我真的推荐这个网站，它涵盖了大多数替代方案，以保持 div 内内容的纵横比:

http://cjwainwright.co.uk/webdev/aspectratio/

祝你好运。