div 纵横比随位置调整大小：固定答案

【问题标题】：div aspect ratio resizing with position:fixeddiv 纵横比随位置调整大小：固定
【发布时间】：2014-06-12 19:58:40
【问题描述】：

我使用position: fixed 在浏览器窗口的左下角放置了一个div。当用户调整窗口大小时，我希望 div 也调整大小，但保留原始纵横比。

仅使用 CSS 解决方案（或确认不能仅使用 CSS 完成）。我在 IE9+ 中工作。我会接受任何解决方案：按宽度或高度调整 div 的大小。

有很多像我这样的问题（有解决方案），但是当 div 使用 position: fixed 时，似乎没有一个问题提供解决方案。他们的解决方案必须有position: absolute，否则不起作用。

编辑 1：Codepen live example here.

编辑 2：This 是我希望它工作的方式，同时仍在使用 position: fixed。

【问题讨论】：

标签： html css

【解决方案1】：

如果你事先知道纵横比，我并不完全清楚——如果是这样，你可以使用一个变体

#content:before {
content:'';
float:left;display:block;
width:0;
padding-top:80%; /*height= 80% of width */
}

可能与min-height 组合为#container？（这是the accepted answer in your link 的简化变体。）

【讨论】：

【解决方案2】：

假设您正在寻找在窗口右下角有一个小的 div 的东西，并且调整浏览器窗口的大小将调整小框的大小。

HTML：

<div class="fixed-box">
    Something...
</div>

CSS：

.fixed-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 10%;
    background-color: #ccc;
}

【讨论】：

不保留纵横比
好的。但是你到底想要做什么。因为您分享的链接回答了您关于保持纵横比的问题。
当我将解决方案的 position: absolute 替换为 fixed 时，它不会。它在屏幕中间显示 div。
好的。原因可能是当您使用position:absolute 时，它相对于其父级position:relative 定位，但是当您使用position:fixed 时，它相对于窗口定位。它与position:absolute 一起工作的事实是因为它的父级正确地使用了padding-bottom: 75%。