4

我想要一个始终为浏览器高度的 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方法可以实现此效果？

4

3 回答 3

2

在这个类似的 SO question中，发现并解释了此博客条目中的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! */
}

在这里演示

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

于 2013-10-07T16:15:02.470 回答
2

我有一个也适用于 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;
}

这是一个小提琴（调整大小后不要忘记刷新）我建议您将此代码复制到本地计算机并在那里尝试而不是在小提琴中。

于 2013-10-03T17:37:12.800 回答
-1

您可以借助父项上的填充来做到这一点，因为相对填充（甚至是高度）基于元素的宽度。

CSS：

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

img {
    width: 100%;
    height: 100%;
    position: absolute;
   left: 0;
 }
于 2013-10-03T11:13:25.283 回答