缩放div宽度取决于高度 [英] Scaling div width depending on height
问题描述
我想要一个始终保持浏览器高度100％的网站，并在高度发生变化时以宽高比缩放宽度.
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
我可以使用新的vh单元实现此目标: http://jsbin.com/AmAZaDA/3(调整浏览器高度)
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
但是，我担心IE8和Safari的后备，因为那里不支持此装置.
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
是否还有其他仅CSS 种方法可以达到这种效果?
Are there any other CSS only methods of achieving this effect?
推荐答案
在此 CSS技术，并在
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
如果这对您足够，我建议您使用此技术.但是，我不知道该技术是否可以适用于您必须根据其高度调整元素宽度的场景.
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
这篇关于缩放div宽度取决于高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
