我希望有一个始终是浏览器高度 100% 的网站，当高度更改时，宽度会以纵横比缩放。
我可以使用新的 vh 单元来实现这一点：http://jsbin.com/AmAZaDA/3(调整浏览器高度(
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
但是，我担心IE8和Safari的回退，因为那里不支持该单元。
还有其他仅限CSS的方法可以实现此效果吗？
我有一个解决方案也适用于IE8(使用纯CSS 2.1(，但并不完美。因为我需要浏览器在他调整大小时重新计算东西，显然除非他必须这样做(而且我找不到让他认为他必须这样做的方法(，所以你必须在调整大小后刷新页面。
据我所知，唯一可以调整保留他的比例的元素是<img>，因此我们将利用<img>来发挥我们的优势。
因此，我们将使用具有所需比率的图像(使用 placehold.it 的服务(，假设我们想要一个13X10比率(如您的示例所示(，因此我们将使用 <img src="http://placehold.it/13x10" /> .该图像将具有固定的高度，100%正文，现在图像的宽度相对于比例缩放。所以图像的宽度130%身体的高度。
图像包含在一个div 中，并且该div 具有inline-block显示，因此他完全按照其内容的大小。 女巫是你想要的大小。
我们使用visibility: hidden;(不是display:none;，因为我们需要图像占用空间(从显示中删除图像，然后创建另一个绝对div，它将保存实际内容，该内容将位于图像正上方(公共容器的 100% 宽度和 100% 高度(。
这非常有效，但是当您调整页面大小时，浏览器并不总是再次测量正确的宽度和高度，因此您需要刷新才能做到这一点。
以下是完整的 HTML：
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
和这个简单的 CSS：
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
这是一个小提琴(调整大小后不要忘记刷新(我建议您将此代码复制到本地计算机并在那里尝试，而不是在小提琴中尝试。
在这个类似的SO问题中，在这个博客条目中发现并解释了一种CSS技术，它允许元素根据其宽度调整其高度。这是代码的重新发布：
.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! */
}
在这里演示
如果这对您来说足够了，我会推荐这种技术。但是，我不知道该技术是否可以适应处理必须让元素根据其高度调整其宽度的情况。
父项的填充来完成此操作，因为相对填充(甚至是高度(基于元素的宽度。
.CSS：
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}