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屋！