Div Square，宽度尺寸基于100％高度 [英] Div Square, width size based on 100% height

问题描述

我想根据元素的（100％）高度创建一个响应的宽度大小的正方形。我相信这是不可能只使用CSS。

I'm trying to make a responsive square with the width size based on the (100%) height of the element. I believe it's impossible using only CSS.

方形宽度应该等于高度（大容器的100％）大容器超过100％屏幕）。

The square width should be equal to the height (100% of the large container. The large container is more than 100% of the screen). The ratio has to be width=height to keep the square.

推荐答案

确定这里的解决方案。

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

这篇关于Div Square，宽度尺寸基于100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！