Question

这就是我想要做的事情：

#sheet {
    margin: 0 auto;
    width: 100%;
    position: relative;
    height: calc(width * 1.3181818181818181818181818181818);
}

#sheet看起来像这样：

<div id="sheet">
    <img src="sheet1.svg"/>
</div>

#sheet的宽度因浏览器的大小而异。高度（目前）取决于sheet1.svg的高度。但我知道sheet1.svg的宽高比，我想在CSS中编码，以便在加载SVG之前可以正确调整#sheet div的大小。我需要div为正确的大小，因为我有一些其他代码依赖于...

CSS3添加了calc()方法，但我不认为你可以根据其他属性进行计算....所以我怎么能点他的？

Answer 1

只能做CSS：

#sheet {
    position: relative;
    padding-top: 50%; /* Your percentage */
}
#sheet > img {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
}

DEMO

它有效，因为如果你在padding-top中使用百分比，则它与宽度有关。然后，您可以使用填充而不是高度，使用position: absolute为子项，以便拥有0px高的父级。

Answer 2

我已经完成了很多jQuery hackery：

var $svg = $(document.getElementById('svg'));
var $sheet = $(document.getElementById('sheet'));

$svg.on('load', function() {
    $(window).off('.setSheetHeight');
    $sheet.css('height', '');
});

var setSheetHeight = function() {
    $sheet.height($sheet.width() * 1.3181818181818181818181818181818);
};

setSheetHeight();
$(window).on('resize.setSheetHeight orientationchange.setSheetHeight', _.throttle(setSheetHeight,100));

它立即将纸张高度设置为其宽度的1.32倍。一旦SVG加载，浏览器就可以自己计算工作表的高度，因此我清除了高度样式并删除了事件监听器以节省一些CPU。我也限制事件（使用下划线），因此它不会经常发生。

如果您感到好奇，我会使用工作表高度来调整页面上的某些文字：

function setFontSize() {
    $('input:text').css('font-size',$sheet.height()/80);
}

setFontSize();
$(window).on('resize.setFontSize orientationchange.setFontSize', _.throttle(setFontSize, 100));

由于我们无法相对于容器的高度设置font-size，显然。

设置高度为宽度的百分比？

2 个答案: