Div Square，基于100%高度的宽度尺寸

Question

我正在尝试制作一个响应式正方形，其宽度大小基于元素的高度（100%）。我相信仅使用CSS是不可能实现的。

正方形的宽度应等于高度（大容器的100％高度。大容器超过屏幕的100％）。比例必须为宽度=高度以保持正方形。

- Sebastien-Gath

---

你可以通过滥用padding-bottom的百分比来实现这一点。 - SLaks

问题在于我不想通过宽度来定义高度，而是想使用容器的100%高度来定义宽度。 - Sebastien-Gath

更明确地说：一个正方形的 div 宽度基于百分比高度。 - Sebastien-Gath

一直在寻找这个，我猜只用CSS是不可能实现的。 - Ziarno

Answer 1

您可以使用微小的行内图像来完成此操作。不需要JS，也不需要额外的文件。

.container {
  height: 150px;
  width: 100%;
  text-align: center;
  background: #acd;
}
     
.square {
  display: inline-block;
  height: 100%;
  background: #691;
}

<div class="container">
  <div class="square">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
  </div>
</div>

- spaceman

---

@Tigerrrrr，OP是否提到他想让正方形变成绿色？这只是为了展示目的。只需删除“text-align”部分即可。 - spaceman

Answer 2

请看... aspect-ratio 属性。

这个属性是最简单的方法之一，基于高度创建一个正方形 div。以下是一些示例代码：

h2 {
  font-family: calibri;
}

#parent {
  height: 96px;
  width: 256px;
  background: grey;
  margin-bottom: 16px;
}

#child {
  height: 80px;
  aspect-ratio: 1 / 1;
  background: lightgrey;
}

#anotherParent {
  height: 96px;
  width: 256px;
  background: grey;
}

#anotherChild {
  height: 50%;
  aspect-ratio: 1 / 1;
  background: lightgrey;
}

<h2>Absolute height (80px/96px)</h2>
<div id="parent">
  <div id="child">
  </div>
</div>

<h2>Relative height (50%)</h2>
<div id="anotherParent">
  <div id="anotherChild">
  </div>
</div>

以下是关于aspect-ratio属性的链接，希望能帮助您理解：

• https://css-tricks.com/almanac/properties/a/aspect-ratio/
• https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
• https://support.squarespace.com/hc/en-us/articles/115008538927

- Tigerrrrr

Answer 3

对于仅使用CSS的解决方案（其中您相对于屏幕大小进行调整），请使用viewport units。例如：

@media screen and (orientation:landscape) {
    .box{
        height: 100vh;
        width: 100vh;
    }
}
@media screen and (orientation:portrait) {
    .box{
        height: 100vw;
        width: 100vw;
    }
}

（你可能需要将它减少到98个单位以消除滚动）

非常适合需要占用屏幕空间的div，以达到精确比例。

此处为JSFiddle链接。

- Escher

---

这是身体本身的100％，而不是父容器。 - Tigerrrrr

Answer 4

由于正方形的宽度和高度相同，且您知道正方形的宽度，因此可以将相同的值应用于高度。

如果您可以使用JS，请尝试以下代码：（jQuery）

var wiDth = $('div').css('width'); // get width
$('div').css('height', wiDth); // apply that value to the height

在这里尝试一下：http://jsfiddle.net/afzaal_ahmad_zeeshan/vpGUK/

- Afzaal Ahmad Zeeshan

---

谢谢，问题是我不知道大容器的尺寸。我想使用高度100%的信息来定义正方形宽度。 - Sebastien-Gath

我无法将div设置为像素。我的目标是创建一个基于百分比高度的正方形宽度div。 - Sebastien-Gath

抱歉，也许我不理解：在Jquery中，您获取宽度并将该值应用于高度。我想做的是相反的：获取百分比高度，并将此值以像素为单位应用于宽度以制作正方形。 - Sebastien-Gath

谢谢您的帮助，我想要做这个fiddle的反向操作（动态宽度而不是高度）> http://jsfiddle.net/mr8gj/2/ - Sebastien-Gath

然后执行这个操作：$('div').css('width', $(this).height()); 简单吧！只需要用高度替换宽度.. @Sebastien-Gath - Afzaal Ahmad Zeeshan

好的，我已经尝试过了，但它不能保持正方形的显示 > http://jsfiddle.net/vpGUK/1/ - Sebastien-Gath

Answer 5

您可以使用JavaScript来实现这一点。我假设您有一个更大的div容器，其中您想要一个正方形，其高度与容器的高度相同。HTML代码如下：

<div id="container">
  <div id="square" style="height:100%;">

  </div>
</div>

在JavaScript中，你只需要这样做：

<script>
  var container = document.getElementById("container");
  var square = document.getElementById("square");

  square.style.width = container.style.height;

  window.onresize=function(){
    square.style.width = container.style.height;
  };
<script>

希望对你有所帮助

- AzadMemon

Answer 6

将以下代码放入您的HTML文件，并使用jQuery库来尝试：

``` ```

var totalHeight = 0;
$("#yourContainer").children().each(function(){ 
    totalHeight += $(this).height;  
});
$("#yourContainer").css('width', totalHeight + 'px');

- Ringo

Answer 7

我认为这可以是一个适合你的好的“仅CSS”解决方案。 跨浏览器工作。

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

很好强调这个不错的CSS规则：

如果垂直填充（和边距）以百分比（％）值指定，则大小是包含元素宽度的百分比。

- Stefano Ortisi

---

绝对是最佳解决方案，使用js来完成这样的任务会过度杀伤力。关于这种技术还有另一篇不错的文章：http://www.mademyday.de/css-height-equals-width-with-pure-css.html - chaenu

谢谢，但问题在于div的像素宽度应该由高度的大小（容器的100%）来定义。 - Sebastien-Gath

大容器的大小可以不同，但应该在其中的div正方形必须具有高度100％ x 100％的尺寸。 - Sebastien-Gath

是的，这实际上并没有回答Sebastian的问题：它展示了如何相对于宽度调整高度大小，而不是相对于高度调整宽度大小。请查看我的答案，以获取仅使用CSS的解决方案。 - Escher

当有人访问Stack Exchange时，问题的“答案”应该实际包含一个答案（包括代码），而不仅仅是一堆指向答案的方向。 - Erik Philips

Answer 8

好的，这里是解决方案。

<div id="square" style="background-color:black;height:100%">test</div>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

http://jsfiddle.net/j372H/7/

- Sebastien-Gath

Answer 9

您可以像这样为容器分配宽度和高度。

.container {
    width: 100vh;
    height: 100vh;
}

它将创建一个正方形的 div，其高度为 100%，宽度等于高度。

- Sachin

---

你在JavaScript的风格中发布了CSS。 - Tigerrrrr