gpt4 book ai didi

jquery - 如何将 div 扩展到浏览器高度或宽度,同时保持其比例? [内图]

转载 作者:行者123 更新时间:2023-12-01 08:12:42 24 4
gpt4 key购买 nike

如果浏览器窗口缩小,那么我希望 div 和其中的图像也缩小。但它必须保持在中间并且始终保持相同的比例。这可能吗?我已经尝试了很多年但没有运气。如有必要,我愿意使用 jQuery 或 JS。

enter image description here

最佳答案

你可以使用这样的东西(使用 jQuery):

<script language="jscript">
$(function(){
ratio=$('#centerdiv').width()/$('#centerdiv').height();
rePos=function(){
if($('#container').innerHeight()*ratio>$('#container').innerWidth()){
$('#centerdiv').width($('#container').innerWidth());
$('#centerdiv').height($('#centerdiv').width()/ratio);
$('#centerdiv').offset({left:0,top:($('#container').innerHeight()-$('#centerdiv').outerHeight(true))/2});
}
else{
$('#centerdiv').height($('#container').innerHeight());
$('#centerdiv').width($('#centerdiv').height()*ratio);
$('#centerdiv').offset({left:($('#container').innerWidth()-$('#centerdiv').outerWidth(true))/2,top:0});
}
};
$(window).resize(rePos);
rePos();
});
</script>
<div id="container" style="position:absolute;top:0;bottom:0;left:0;right:0">
<div id="centerdiv" style="position:absolute;width:150px;height:100px;background-color:red;padding:0;border:0;margin:0"></div>

关于jquery - 如何将 div 扩展到浏览器高度或宽度,同时保持其比例? [内图],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12544955/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com