Question

我正在尝试根据元素的（100％）高度制作宽度大小的响应方块。我相信只使用CSS是不可能的。

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

Answer 1

我认为这对您来说可能是一个很好的“仅限css”解决方案。跨浏览器工作。

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

很高兴突出这个好的CSS规则：

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

Answer 2

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

如果你可以使用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/

Answer 3

您可以使用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>

希望有所帮助

Answer 4

将它放在<script src="http://code.jquery.com/jquery-1.10.2.js"></script>上并尝试使用jquery：

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

Answer 5

好的解决方案。

<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/

Answer 6

对于仅限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 here.

Answer 7

您可以使用很小的嵌入式图像来完成此操作。没有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>

Answer 8

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

.container{
      width: '100vh',
      height: '100vh',
}

它将创建一个具有 100% 高度和宽度 = 高度的方形 div。

Div Square，宽度尺寸基于100％高度

8 个答案: