在调整窗口大小时调整DIV大小但保持长宽比
问题描述:
我的页面中有一个DIV元素,当窗口调整大小时,我想要调整其大小,但保持宽高比为正方形。我想将宽度设置为浏览器宽度的50%,高度等于宽度。我怎样才能做到这一点?在调整窗口大小时调整DIV大小但保持长宽比
如果解决方案需要JavaScript,那很好,但我不想使用jQuery。
答
我不知道,你可以让一个属性(高度)等于CSS其他财产(宽度)......嗯,至少在CSS 2
但你当然可以在JavaScript中做到这一点。
<div id = "myDiv"></div>
<script>
document.onresize = function() {
var element = document.getElementById('myDiv'); // the element
var size = Math.floor(window.innerWidth/2) + 'px'; // 50% window width
element.style.width = size; // set the width
element.style.height = size; // set the height
};
</script>
请注意,window.innerWidth
属性不存在于IE中。在那里,你必须使用document.documentElement.clientWidth
。
答
您可以将宽度设置为CSS中窗口的50% 你只需要调整高度 -
window.onresize=function(){
var who= document.getElementById('divtoresize');
who.style.height=who.offsetWidth+'px';
}
谢谢这是完美的 – Joey 2012-04-08 04:22:03