Question

我的一位客户想要一个小表格，最终看起来像这样（请忽略可调整大小的角落，只是一些测试）：

enter image description here

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

enter image description here

具体来说，对于这个项目，我认为我可以使用max-width属性并使用百分比;但我想知道是否有办法调整div及其内容的大小，所以一切都保留了宽高比。这样，如果我减小div的宽度/高度，我将得到更小的文本和边距。

我没有找到任何jquery插件来做到这一点，所以我尝试开发一个概念证明来检查主要的困难（参见jsfiddle和/或下面的代码）。这有点儿马车，但你可以通过缓慢调整黑色div来看清楚我的意思。

所以这是我的问题：

有没有办法调整div的大小，保留其内容的宽高比？

您可以看到以下小提琴：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

关键是填充。

填充取决于在％中定义的包含元素的WIDTH。

例如，如果padding-top: 10%;实际上说填充顶部应该是特定元素宽度的10％。

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

高度需要为零，以便从设置的填充产生高度。

为了进一步阅读，我真的推荐这个网站，涵盖大多数替代方案，以维持div内容的宽高比：

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

祝你好运。

Answer 2

我找到了解决方案。这真的不是有史以来最干净的解决方案，但至少它可以工作，即使是字体大小。

enter image description here

我首先在一个简单的style.css文件中使用已定义的大小（以像素为单位）创建了我的小部件：

CSS

.imc-error {
    width: 95%;
    color: #FF0185;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    border: 1px solid #FF0185;
    padding: 5px 5px 5px 5px;
    text-align: center;
    margin-bottom: 10px;
}

然后，我开发了一个脚本，它接受整个CSS文件，并生成jquery指令，用动态值替换所有“NNpx”，例如：

JavaScript / jQuery

$('.imc-error').css('font-size', Math.max(ratio * 15, 8) + 'px');
$('.imc-error').css('border', ratio * 1 + 'px solid #FF0185');
$('.imc-error').css('padding', ratio * 5 + 'px ' + ratio * 5 + 'px ' + ratio * 5 + 'px ' + ratio * 5 + 'px');
$('.imc-error').css('margin-bottom', ratio * 10 + 'px');

然后，我只需要使用以下公式计算我的ratio变量：

$('#container').width() / 494;

494是我的原始宽度。

如果您有兴趣，可以使用以下代码。

PHP

$file = "css/style.css";
$maxFontSize = 8;

$out = array();
$content = str_replace(array("\n", "\r", "\t"), '', file_get_contents($file));
preg_match_all("|\.([^\{]+)\{([^\}]+)\}|", $content, $out, PREG_PATTERN_ORDER);
$count = count($out[0]);
for ($i = 0; ($i < $count); $i++)
{
    list($name, $content) = array(trim($out[1][$i]), $out[2][$i]);
    $propsValues = explode(';', $content);
    foreach ($propsValues as $propValue)
    {
        if (empty($propValue))
        {
            continue ;
        }
        $propValue = explode(':', $propValue);
        $property = trim($propValue[0]);
        $values = explode(' ', trim($propValue[1]));
        $needProportion = false;
        $newValue = null;
        foreach ($values as $value)
        {
            if (!is_null($newValue))
            {
                $newValue .= ' ';
            }
            if (substr($value, -2) == 'px')
            {
                $needProportion = true;
                if ($property == 'font-size')
                {
                    $newValue .= "' + Math.max(ratio * " . intval($value) . ", {$maxFontSize}) + 'px";
                }
                else
                {
                    $newValue .= "' + ratio * " . intval($value) . " + 'px";
                }
            }
            else
            {
                $newValue .= $value;
            }
        }
        if ($needProportion)
        {
            $newValue = substr($newValue, strlen("' + "));
            echo "\$('.{$name}').css('{$property}', {$newValue}');<br/>";
        }
    }
}

此方法实际上无法维护，因为您需要同时维护css和javascript文件。明智地使用这种方式。

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

2 个答案: