Html 基于垂直边创建响应性正方形

我有一个绝对定位的容器，我需要根据它的高度（不是宽度，所以

填充底部

技巧不起作用）做出一个响应性的正方形

到目前为止，我一直在容器内使用方形图像来保持其比例：

HTML:

这在Chrome中运行良好，但在Firefox中不起作用，这正是我要解决的问题

出于某种原因，Firefox忽略绝对定位元素的内容，并将其宽度设置为0，除非指定了“不同”（这可能更直观）

任何帮助都将不胜感激

PS：下面是我正在寻找的绿色矩形的截图：

---

这就是它在Chrome中的外观，也是我希望它在Firefox（和Safari）中的外观。

我认为CSS不可能做到这一点。使用jQuery是可能的@WizardCoder，但它在Chrome中确实有效。我仍然希望我错过了一些简单的东西。只要在chrome上注册，我就可以看到你现在想要什么了。我以为您希望保留div的纵横比。我再看一看。在iOS Safari中，我看到一个矩形，垂直边比水平边长（但宽度>0）。这就是你想要的，还是你需要一个四边都相等的正方形？@cantera，我需要一个绿色矩形成为一个完美的正方形（就像现在在Chrome中的工作方式）。看起来它在Safari中也不起作用。

<div class="relative">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores placeat eius cum non eum suscipit, facilis nulla, porro, quasi voluptate quaerat amet vitae, illum quam omnis. Placeat, fuga excepturi tempore?
  <div class="absolute">
    <img src="square.png" alt="..." />
  </div>
</div>

.relative {
  position: relative;
}
.absolute {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background-color: fade-out(green, .5);

  > img {
    height: 100%; width: auto;
  }
}