Question

我希望网站始终具有浏览器高度的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 方法可以达到此效果？

Answer 1

我的解决方案也适用于IE8（使用Pure 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;
}

这是一个Fiddle（不要忘记在调整大小后刷新）我建议你将这段代码复制到你的本地机器上，然后在那里尝试，而不是在小提琴中。

Answer 2

在此similar SO question和CSS technique was found中解释this blog entry，允许元素根据其宽度调整高度。这是代码的重新发布：

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

如果这对你来说已经足够了，我会推荐这种技巧。但是，我不知道该技术是否可以适用于处理必须根据高度调整宽度的元素的情况。

Answer 3

您可以在父项的填充帮助下执行此操作，因为相对填充（即使是高度方式）也基于元素的宽度。

CSS：

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
 }

img {
    width: 100%;
    height: 100%;
    position: absolute;
   left: 0;
 }

根据高度缩放div宽度

3 个答案: