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

这就是我想做的事：将高度设置为宽度的百分比？

#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中，这样#sheet div在SVG加载之前可以正确调整大小。我需要div的大小正确，因为我有其他的代码取决于...

CSS3增加了calc()方法，但我不认为你可以做基于其他属性的计算....所以我怎么能点他的？

来源

2013-11-23 mpen

与CSS ....你不能 – DaniP

@Danko：这是一个无赖。 – mpen

我希望'calc（）'可以快速发展，使它变得更容易 – DaniP

我已经有很多jQuery的两轮牛车的做到了：

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.32x其宽度。一旦SVG加载完毕，浏览器可以自行计算工作表的高度，所以我清除了高度样式并删除了事件侦听器来保存一些CPU。我也扼杀了事件（使用下划线），所以它不会太频繁地触发。

如果你很好奇，我便用床单高度来调整页面上的一些文字：

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

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

既然我们不能设置font-size相对于其容器的高度，显然。

来源

2013-11-23 02:40:21 mpen

1+很高兴你知道了什么。我会提出类似这样的建议，因为目前纯CSS无法实现..最终会出现** [CSS中的变量]（http://dev.w3.org/csswg/css-variables /）** ..所以它可能有一天..看到这个例子给变量和'calc（）'http://dev.w3.org/csswg/css-variables/#cycles –

@JoshC它可以CAN只做CSS。请参阅[我的答案]（http://stackoverflow.com/a/20157916/1529630） – Oriol

这是可以做到只有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高的父级。

来源

2013-11-23 02:50:20 Oriol

1+在盒子外面思考的好方法:)我绝对不会想到这个！ –

如果我们立即提醒高度（http://jsfiddle.net/D66wu/1/），它会显示0.您确定图像在图像加载之前有高度吗？ – mpen

@Mark见http://jsfiddle.net/D66wu/2/。你的小提琴警告'0'，因为我用填充替换了高度，'.height（）'不包括（http://api.jquery.com/category/dimensions/） – Oriol

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

回答

相关问题