Div Square,宽度大小基于 100% 高度 [英] Div Square, width size based on 100% height
本文介绍了Div Square,宽度大小基于 100% 高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试根据元素的 (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);
}
这篇关于Div Square,宽度大小基于 100% 高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文