logo标签列表

根据高度调整 div 宽度的缩放

cssviewportviewport-units
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的方法来实现此效果？

这里曾经有一个非常类似的问题被问到过，链接在这里：https://dev59.com/t2035IYBdhLWcg3wZvFg，而这个答案：https://dev59.com/t2035IYBdhLWcg3wZvFg#6615994 是首选答案。然而，在那个问题和答案中，是高度根据宽度进行调整。我试图使其适应高度，但迄今为止还没有成功。也许你可以联系他们，看看他们是否已经找到了解决方案。 - BigMacAttack
@BigMacAttack 这是一个脚本解决方案。你可以用脚本做任何你想做的事情...但我想知道是否可能仅使用CSS实现。 - avrahamcool
@BigMacAttack 我现在看到那篇帖子的其他答案都是纯CSS的。谢谢。 - avrahamcool
@avrahamcool 嗯，我提供的CSS解决方案比被选中的答案得到了*更多的赞同。 ;) 你看过那个家伙的博客文章了吗？在这里找到。也许你可以联系他或者他引用的那个人，看看他们是否有一种根据高度调整宽度的解决方案。 - BigMacAttack
@BigMacAttack，实际上，你的回答已经满足了我的需求。发表它，我会给你颁发奖励。 - avrahamcool
显示剩余2条评论
3个回答
2
在这个相似的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! */
}

演示在此

如果这对您来说足够了，我建议您使用这种技术。但是，我不知道这种技术是否适用于必须根据其高度调整元素宽度的情况。

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，该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（调整大小后别忘了刷新） 我建议您将此代码复制到本地计算机上并在那里尝试，而不是在Fiddle中进行。

-1
你可以通过在父元素上添加padding来实现，因为相对padding（甚至是高度方面的）是基于元素的宽度的。
CSS：
.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
 }

img {
    width: 100%;
    height: 100%;
    position: absolute;
   left: 0;
 }
我看不到分叉！ - theorise
请查看此链接，可能会对您有所帮助：http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/ - Black Sea
这个与我发布的jsbin链接的行为不同 - 当我调整高度时它不会自动调整宽度。 - theorise
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接