jQuery 将 div 的高度设置为宽度的一半
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17672010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set the height of a div to be half of whatever the width is
提问by Flickdraw
How can I set the height of a div to be exactly half whatever the width is, when the width will change depending on the users screen size?
当宽度会根据用户屏幕大小而变化时,如何将 div 的高度设置为宽度的一半?
I have the following set on a div...
我在 div 上设置了以下内容...
#div1 {
min-width:400px;
width:100%;
max-width:1200px;
height:400px;
background-color:red;
}
The width works fine on this, it locks at 400 pixels if the screen gets too narrow and it also stops expanding at 1200 pixels if the screen gets too big. But, I also want the height to change to be exactly half of what the width is at any given time. Something like...
宽度在这方面效果很好,如果屏幕太窄,它会锁定在 400 像素,如果屏幕太大,它也会在 1200 像素处停止扩展。但是,我还希望在任何给定时间将高度更改为宽度的一半。就像是...
#div1 {
min-width:400px;
width:100%;
max-width:1200px;
height:width/2;
background-color:red;
}
That hasn't worked (which I wasn't really expecting it to).
那没有用(我真的没想到会这样)。
I'd prefer to use CSS if it's possible, but as I'd also like the height to change if the user manually adjusts the size of the internet window too (like what happens with the width at the moment). I'm not sure it's possible with CSS, however, if there's a way to achieve this by Jquery I'd be happy to use that too.
如果可能的话,我更喜欢使用 CSS,但因为如果用户也手动调整 Internet 窗口的大小(就像现在的宽度会发生什么),我也希望高度改变。我不确定 CSS 是否可行,但是,如果有一种方法可以通过 Jquery 实现这一点,我也很乐意使用它。
jsFiddle of the above for reference.
Can anyone help me?
谁能帮我?
回答by Dom Day
If you're ok with supporting only modern browsers, you can do this: http://jsfiddle.net/kNPfh/
如果你只支持现代浏览器,你可以这样做:http: //jsfiddle.net/kNPfh/
The vw measure is in 1/100th of the viewport width, so 50vw is 50% of screen width.
vw 测量值是视口宽度的 1/100,所以 50vw 是屏幕宽度的 50%。
<div class='halfwidth'></div>
.halfwidth {
width: 100%;
height: 50vw;
background-color: #e0e0e0;
}
if not, you can use: http://jsfiddle.net/ff7WC/
如果没有,您可以使用:http: //jsfiddle.net/ff7WC/
$(window).on( 'resize', function () {
$('.halfwidth').height( $(this).width() / 2 );
}).resize();
回答by Flickdraw
Make sure you have a js file then use this
确保你有一个 js 文件然后使用这个
$(window).load(function(){
$('.element').height($('.element').width() / 2);
$(window).resize(function(){
$('.element').height($('.element').width() / 2);
});
});
回答by damien hawks
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
您可以在父项上填充的帮助下完成此操作,因为相对填充(甚至高度方向)基于元素的宽度。
CSS:
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
For details, see this article on the subject http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes
有关详细信息,请参阅有关该主题的这篇文章 http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes
You can also use jquery for that, something like:
您也可以为此使用 jquery,例如:
$('.ss').css('height',width()/2);
Please choose this as the correct answer if it solves your doubt by clicking on the tick symbol to the left.
如果通过单击左侧的勾号解决了您的疑问,请选择它作为正确答案。