设置div随着窗口大小的改变按比例变化

我写了两个div,前一个div写了一个自定义属性test作标识,如果为true则实现自动变化大小的效果,代码如下

 <div style="width: 500px;height: 400px;float: left;border: 5px solid red;" id="a" test="true">
            aaaa
        </div>
        <div style="width: 500px;height: 400px;float: left;border: 5px solid green;" id="b">
            bbbb
        </div>
        <script type="text/javascript">
            var windowWidth = window.innerWidth;
            var windowHeight = window.innerHeight;
            $(document).ready(function() {
                var chartAll = $('div');
                console.log(chartAll.length);
                for(var i = 0; i < chartAll.length; i++) {
                    var chartID = chartAll[i].id;
                    console.log(i + chartID);
                    var chart = $('#' + chartID);
                    var widthChart = chart.width();
                    var heightChart = chart.height();
                    chart.attr('test') == 'true' && $(window).resize(function() {
                        var widthResize = widthChart * window.innerWidth / windowWidth;
                        var heightResize = heightChart * window.innerHeight / windowHeight;
                        chart.width(widthResize);
                        chart.height(heightResize);
                    });
                }
            });
        </script>

我设置的是前一个变化大小,但是改变大小的是后一个,和我预想的不一样,这样的 话该怎么解决啊?

3个回答

我用两个div随窗体变化而变化,我实现的方法如下:

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="C:/Users/Administrator/Desktop/html/jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
            var windowWidth = window.innerWidth ;
            var windowHeight = window.innerHeight ;
            $(window).resize(function() {
                var chartAll = $('div');
                console.log(chartAll.length);
                for(var i = 0; i < chartAll.length; i++) {
                    var chartID = chartAll[i].id;
                    var chart = $('#' + chartID);
                    var widthChart = chart.width();
                    var heightChart = chart.height();
                    if(chart.attr('test') == 'true'){ 
                        var widthResize = widthChart * window.innerWidth / windowWidth;
                        var heightResize = heightChart * window.innerHeight / windowHeight;
                        chart.width(widthResize);
                        chart.height(heightResize);
                    }
                }
                //把当前窗口的width个heigth赋值给windowWidth和windowHeight  
                //以保证窗体大小改变事件再次触发的时候不会取到初始化时的值
                //而导致目标div不停的变小或变大
                 windowWidth = window.innerWidth;
                 windowHeight=window.innerHeight;
            });
        </script>
</head>
<body>
<div style="width: 500px;height: 400px;float: left;border: 5px solid red;" id="a" test="true">
            aaaa
        </div>
        <div style="width: 500px;height: 400px;float: left;border: 5px solid green;" id="b" >
            bbbb
        </div>
        <div style="width: 500px;height: 400px;float: left;border: 5px solid blue;" id="c" test="true">
            cccc
        </div>
</body>
</html>
wal1314520
wal1314520 回复王蛇无毒: 没事啦,能帮到你我就很开心了
2 年多之前 回复
qq_35436516
JHCan333 谢谢拉
2 年多之前 回复

其实 问题出现在 chart.attr('test') == 'true' && $(window).resize(function() { 这句话.
你需要 这样

 $(document).ready(function() {
    $(window).resize(function() {
        var chartAll = $('div');
        console.log(chartAll.length);
        for (var i = 0; i < chartAll.length; i++) {
            var chartID = chartAll[i].id;
            console.log(i + chartID);
            var chart = $('#' + chartID);
            var widthChart = chart.width();
            var heightChart = chart.height();
            if (chart.attr('test') == 'true') {
                var widthResize = widthChart * window.innerWidth / windowWidth;
                var heightResize = heightChart * window.innerHeight / windowHeight;
                chart.width(widthResize);
                chart.height(heightResize);
            };
        }
    });
});
qq_35436516
JHCan333 还有一个问题,这样放到外面后,会导致widthChart 一直变化,可是需要的是一个固定值,这怎么解决啊?
2 年多之前 回复

这个是我帮你改过以后的,实现的是第一个div变化,你看一下!因为你一直在循环中,所有这个改变会在循环结束后执行改变,你虽然判断了test的值,但是因为循环没有停,最后chart指向的还是$("#b"),所以导致了你怎么弄都是第二个div变化。我用了一个break在判断之后跳出循环,这样就不会继续循环,chart的指向还是$("#a"),就不会有问题了!希望我的回答能够给你帮助

 var windowWidth = window.innerWidth;
            var windowHeight = window.innerHeight;
            $(document).ready(function() {
                       var chartAll = $('div');
                console.log(chartAll.length);
                for(var i = 0; i < chartAll.length; i++) {
                    var chartID = chartAll[i].id;
                    console.log(i + chartID);
                    var chart = $('#' + chartID);
                    var widthChart = chart.width();
                    var heightChart = chart.height();
                    if(chart.attr('test') == 'true'){ 

                     $(window).resize(function() {

                        var widthResize = widthChart * window.innerWidth / windowWidth;
                        var heightResize = heightChart * window.innerHeight / windowHeight;
                        console.log(chart);
                        chart.width(widthResize);
                        chart.height(heightResize);
                    });
                     break;
                     }
                }
            });
wal1314520
wal1314520 回复王蛇无毒: 我已经实现了多个div的改变 代码就贴在下面了 你可以看看是不是你想要的结果
2 年多之前 回复
wal1314520
wal1314520 回复王蛇无毒: 恩,这样只能找到第一个满足要求的div,如果有多个的话,就需要用别的方法了,就看你到底是什么样的需求了。
2 年多之前 回复
qq_35436516
JHCan333 那这样的话,如果有多个div就不太好吧?
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
asp.net 控件随着窗口大小按比例变化源码
asp.net 控件随着窗口大小按比例变化源码! 很值得下载看看!资源免费,大家分享!!
怎样使控件大小随着窗口大小变化而成比例的变化?
thanks
控件随窗口大小比例变化
不知道一下代码有何问题 没有错误 但功能实现不了rnrnvoid CMFCSDIView::OnSize(UINT nType, int cx, int cy)rnrn CView::OnSize(nType, cx, cy);rnrnrn // TODO: Add your message handler code herern rn rn CWnd *pWnd;rn rn pWnd = GetDlgItem(IDC_STATIC); //获取ID为i的空间的句柄,因为“确认”ID为1,“取消”ID为2rn if(pWnd) //判断是否为空,因为对话框创建时会调用此函数,而当时控件还未创建rnrn rn CRect rect; //获取控件变化前的大小 rn pWnd->GetWindowRect(&rect);rn ScreenToClient(&rect);//将控件大小转换为在对话框中的区域坐标rn //cx/m_rect.Width()为对话框在横向的变化比例rnrn rect.left=rect.left*cx/m_rect.Width();//调整控件大小rn rect.right=rect.right*cx/m_rect.Width();rn rect.top=rect.top*cy/m_rect.Height();rn rect.bottom=rect.bottom*cy/m_rect.Height();rn pWnd->MoveWindow(rect);//设置控件大小rn rn rn GetClientRect(&m_rect);// 将变化后的对话框大小设为旧大小rnrn请高手指教哈
word的窗口大小能不能随着vb窗口大小的变化而变化?
我现在把word嵌入到vb的窗体中了,可是我想让word窗体总是能随着vb窗体的大小变化而改变,有没有人知道要怎么做呢?谢谢rn
ListControl如何随着窗口大小的改变而改变
我写了个SDIrn使用了CFormViewrn在这上面,我放了一个List Controlrn现在,在程序执行的时候,list control的大小就是我用资源编辑器画出来的大小rn而且,如果我resize窗口,list control也不会发生什么变化。rnrn我希望能实现随着form大小的改变而自己改变大小的list controlrn最好能够正好占满窗体rnrn我在VB中看到有个属性交anchor,跟那个效果比较像。rn
如何在改变窗口大小时,固定比例变化!
拖动窗口大小时,怎么使窗口按比例变化
div随着浏览器窗口大小变更,改变大小(resize)
浏览器的放大缩小会导致网页布局变动,jquery的resize()方法,可以根据浏览器的窗口大小的变动,对网页进行操作:以下是div随着浏览器窗口大小变更,改变大小(resize)的案例:html:js效果:resizeDiv的块会根据网页变更,大小也随之改变...
实现控件随着窗口大小按比例变化Visual Basic6.0程序,VB6.0源代码
实现控件随着窗口大小按比例变化Visual Basic6.0程序,VB6.0源代码
窗口大小改变时滚动条的变化
CScrollView将滚动条滚动到中间,再改变窗口大小,这时滚动条怎么变化。rn
响应式布局 改变div所占比例
#inner{                 width: 1200px;                 margin: 0 auto;             }             #left{                 width: 50%;                 height: 400px;                 background: re
求状态栏大小随着窗口大小改变
我在OnSize()里写rn CRect rect;rn GetClientRect(rect); rn m_StatusBar.MoveWindow(rect,false); rn CDialog::OnSize(nType, cx, cy);rn程序出错是那种终止\重试\忽略rn不知什么原因是 m_StatusBar.MoveWindow(rect,false); rn这局出的错
dll窗口不会随着调用窗口大小的变化而变化
我在写一些试验性的代码,这是我目前的dll代码,可用,不过有个小小的问题,dll窗口不会随着调用窗口大小的变化而变化,另外,调用dll的窗口的 FormStyle = fsMDIFormrnrn//---------------------------------------------------------------------rnrn#include rn#include rn#include "MainUnit.h"rn#pragma hdrstoprnrnTApplication *pDllApp = NULL;rnrnrn#pragma argsusedrnint WINAPI DllEntryPoint(HINSTANCE hinst, unsigned long reason, void* lpReserved)rnrn if(reason==DLL_PROCESS_ATTACH || reason==DLL_THREAD_ATTACH ) // DLL入口处理rn rn CoInitialize(NULL);rn rnrn if(reason==DLL_PROCESS_DETACH || reason==DLL_THREAD_DETACH ) // DLL出口处理rn rn CoUninitialize();rn Application = pDllApp; // 恢复Applicationrn rn return 1;rnrn//---------------------------------------------------------------------------rn//---------------------------------------------------------------------------rnextern "C"__declspec(dllexport)void __stdcall ShowDllForm(TApplication* myApp , TWinControl* pFormParent )rnrnrn if( pDllApp == NULL )rn rn pDllApp = Application;rn Application = myApp;rn rn rn if ( MainForm == NULL )rn MainForm = new TMainForm( pFormParent ); //Applicationrnrn SetParent(MainForm->Handle ,pFormParent->Handle );rn MainForm->Show();rnrnrnrn要如何解决这个问题??查了好多贴子,都没有解决rnrnrn
有什么简便的方法让窗口中的控件随着窗口大小按比例地变化,而不是一个个地设置?
最近加班多了....头晕了.....不想了.........
控件如何随着主窗口大小变化而变化?
我建了个单文档程序,基于CFormView,上面放了很多控件,但是当我改变主窗口大小的时候,控件大小不随之变化。如何设置?rnrn问题比较简单,给20分...
怎样使控件的大小随着窗口大小的变化而变化?
谢谢!
主窗口大小改变,控件不能正常按窗口大小改变?
简历一个CFormView工程,然后分别在下列两个函数添加如下代码,但是函数运行时总是报除零错误,原因是GetClientRect(&m_rectC);获得的四个坐标都为0,不知道为什么?rnrn[code=c]void CCP_001View::OnInitialUpdate()rnrn CFormView::OnInitialUpdate();rn GetParentFrame()->RecalcLayout();rn ResizeParentToFit();rnrn GetClientRect(&m_rectC); //记录原客户区尺寸rnrnrnrnvoid CCP_001View::OnSize(UINT nType, int cx, int cy) rnrn CFormView::OnSize(nType, cx, cy);rn rn // TODO: Add your message handler code herern rn //this->GetWindowRect(&m_rectW);rn //this->GetClientRect(&m_rectC);rnrn CWnd *pWnd; rn pWnd = GetDlgItem(IDC_SCOPE); //获取ID为i的空间的句柄,因为"确认"ID为1,"取消"ID为2rn if(pWnd) //判断是否为空,因为对话框创建时会调用此函数,而当时控件还未创建rn rn CRect rect; //获取控件变化前的大小 rn pWnd->GetWindowRect(&rect);rn ScreenToClient(&rect);//将控件大小转换为在对话框中的区域坐标rn //cx/m_rect.Width()为对话框在横向的变化比例rnrn rect.left=rect.left*cx/m_rectC.Width();//调整控件大小rn rect.right=rect.right*cx/m_rectC.Width();rn rect.top=rect.top*cy/m_rectC.Height();rn rect.bottom=rect.bottom*cy/m_rectC.Height();rn pWnd->MoveWindow(rect);//设置控件大小rn rnrn GetClientRect(&m_rectC);// 将变化后的对话框大小设为旧大小rn[/code]
Form随着屏幕的大小按比例调整 怎么设置?
form窗口根据屏幕的大小按比例调整,就是画面一直保持一定的比例,有这个设置么? 我试了几个设置 好像没有效果。高人解答。
父div随着子div的高度改变而改变
父div随着子div的高度改变而改变问题情况1:父div未设置高度,子div为标准流(即未设置浮动)<body> <div class="aa">父div <div class="bb">子div</div> <div class="cc">子div</div> </div> </body>此时的父div随着子div的改变而改变 情况2:父div设置
JS 实现DIV随浏览器窗口大小变化
以下是宽度变化的示例,高度也可参考: 01 &amp;lt;script type= &quot;text/javascript&quot; &amp;gt; 02    function initWidth() { 03          var bodyWidth = document.co...
请教如何实现vb程序中控件随着窗口大小的改变而改变,即保持原来的比例?
谢谢!在线等
怎么样才能使控件位置随着对话框大小的变化而按比例变化
比如说,一个button在一个dialog最小化时是在最左边的,当这个dialog最大化时,怎么才能使这个button还在这个dialog的最左边呢???rnrn好像在.net中可以通过每个control的属性来设置,不知在MFC中怎么设置呢?rnrn谢谢!!
如何使flash随着浏览器窗口大小的改变而改变
我做了一个页面 中间是一个flashrn我的问题是 如何当窗口放大和缩小时,这个flash能够随着浏览器的窗口也跟着放大的缩小,如何flash的宽度保持和浏览器窗口一样的宽度而比例又保持不变?rnrn谢谢各位老大了.rn
请问如何让数据窗口随着窗口大小的改变而改变?
就是说如果窗口最大化,那窗口中的数据窗口也跟着最大化,保持其在窗口中的大小比例不变。如何实现?特别是运用在MDI窗口的工作窗口情况时,如何实现。
窗口分割后的大小如何随着窗口大小的改变而改变
这是我编的一个多文档窗口分割程序:rnBOOL CBEAMFRAME::OnCreateClient(LPCREATESTRUCT lpcs, CCreateContext* pContext) rnrn // TODO: Add your specialized code here and/or call the base classrn CRect rect;rn GetWindowRect(&rect);rn int xx,yy;rn xx=(rect.right-rect.left)/2;rn yy=(rect.bottom-rect.top)/8;rnrn BOOL ret=m_wndSplitter.CreateStatic(this,8,2);rn ret|=m_wndSplitter.CreateView(0,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(1,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext); rn ret|=m_wndSplitter.CreateView(2,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(3,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(4,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(5,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(6,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(7,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rnrn ret|=m_wndSplitter.CreateView(0,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(1,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(2,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(3,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(4,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(5,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(6,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(7,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn return ret;rn rn但是程序运行以后列的宽度不是窗口的1/2,行的高度也不是1/8,窗口最大化以后也不随着改变。rn可求大家帮忙!
如何让控件的位置随着窗口大小的改变而改变?
比如一个窗口不在最大化的时候,一个pushButton在窗口的最右下角,现在把窗口最大化,pushButton就不在窗口的右下角了。我希望pushButton还在右下角,请问怎么实现?rn把窗口最大化会产生什么事件吗?
求助!!!swing 中控件随着 窗口大小改变而改变 问题
[img=http://hi.csdn.net/attachment/201101/20/514721_1295516337SpBZ.jpg][/img]rnrnrn大家看看 swing中控件随着窗口大小改变而改变,这个不能。。。rn是不是布局管理器的问题rn大家知道BoxLayout会随着窗口自动改变吗?
窗口大小变化事件自动改变控件大小
课程讲解基于QT5.9 SDK,包含QT界面编程的核心内容,并提供全部源码,课程讲解方式是接口讲解、分析、演示示例,课程讲解QTCreator在不同平台的配置方法,linux,windows,mac,课程演示主要以vs2015+QT5.9为主,开始会讲解QTCreator配置。课程源码基于c++ 11以上版本,建议至少安装vs2013以上。课程后会做一个图像编辑器的示例。
Air改变窗口大小设置方式
目前程序在窗口普通大小和最大化的时候都是显示5本图书,在最大化状态时视图内容太单薄。我们想让窗口最大化时显示10本书,普通大小时显示5本,并且让程序只支持这两种尺寸,禁止用户随意调整窗口大小。     首先打开BookGallery-app.xml文件,将其中的“&amp;lt;resizable&amp;gt;”标签值改为“false”,此时运行程序发现窗口右下角的“gripper”控件还在,并且仍然可以...
正五边形可以随着值得变化改变图形
正五边形可以随着值得变化改变图形,网上找了好久没有找到。
动态获取div的高度 随着窗口变化而变化
1、jquery方法 &lt;script&gt; var winHeight = $(window).height(); $("#show").css("height",winHeight); $(window).resize(function() { winHeight = $(window).height(); $("#sho...
如何让控件随窗口大小的改变而成比例改变?
窗体最大化时,控件按比例变化
rn为什么不能设置让控件随着窗体变大而按比例变化rnrn好像 vb,vc等都不可以,其实像微软等应该很容易做到的rnrn目前我发现 matlab 在做 gui时,有次选项,不用再编什么语句来实现rnrn
div层随着控件位置的变化而变化????
[img=http://hi.csdn.net/attachment/201110/8/1226382_1318065925Xf7e.jpg][/img]rnrn这个悬浮框的位置应该是“产品分配单元”旁边文本框的下边,可是我用鼠标滚动了一下,悬浮框的位置没变,文本框的位置变了。rnrn问:怎么能使悬浮框随文本框位置的变化一起变化。rnrn补充,用javascript或者JQUERY
label的大小随着窗口大小变化,怎么让label中文字的大小随着label变化?
如题,即怎么让label中的文字填充整个label
让div的大小随着内容的变化而变化
*{ margin:0px; padding:0px; } div{ display: inline-block;行内块级元素 width: auto;                         height:auto;                        border: 1px solid #ccc; } 请问div的margin值是多少上来
div块的大小随着内边距改变
div元素的width和height已经设置为固定值,但是当我改变padding的时候,div的大小却会改变。为什么呢,不明白究竟是怎样的。rn[code=html]rnrnrn rnrnrnrn rn rnCSS is fun!rnrn rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnrnrnrnrnrnrn[/code]rnrnpadding为25时的情况:rn[img=https://img-bbs.csdn.net/upload/201712/04/1512374749_115432.png][/img]rnpadding为5时的情况:rn[img=https://img-bbs.csdn.net/upload/201712/04/1512374789_681689.png][/img]
div元素按比例缩放的实现方法
[align=center][size=large]div元素按比例缩放的实现方法[/size][/align] 某些场景下,窗口宽度缩放时,使得元素宽度自适应的同时,保证每个元素的宽高比例不变。 [b]1.1利用CSS属性实现——padding-bottom属性[/b] padding-bottom 有一个特性是当它的值是百分比形式时,百分比的基数是其所在元...
实现窗体和控件随分辨率变化按比例变化?
我写了一个函数实现了功能rn我想把它写成一个公共的方法每个窗体Load时调用 把窗体传进去rn不用每次在Load事件中写重复的代码rnrn//Basefuction 类下的一个方法rn//取得比例rnpublic float GetSereen()rn rn float Width,Height;rn float Bili;rnrn Screen [] screens = Screen.AllScreens;rn Width=screens[0].WorkingArea.Width;rn Height=screens[0].WorkingArea.Height;rn Bili=Width/1024;rn return Bili;rn rn rn rnrn//FormLoad时rnprivate void Form1_Load(object sender, System.EventArgs e)rn rn Basefuction GC = new Basefuction rn int bbb;rn string dddd = "" ;rn bbb= Convert.ToInt32(100*GC.GetSereen());rn float H = GC.GetSereen();rn if (bbb.ToString()!="")rn rn rn foreach(System.Windows.Forms.Control ss in this.Controls)rn rn ss.Size = new Size(Convert.ToInt32(ss.Width*H),Convert.ToInt32(ss.Height*H));rn rnthis.Size = new Size(Convert.ToInt32(this.Width*H),Convert.ToInt32(this.Height*H));rn
随着窗口的改变,怎样使窗口中的窗体也按一定比例改变?
怎么设计,谢谢
SetWindowPos函数的问题,如何让控件随窗口大小的改变按比例改变大小,参数输入计算
相关热词 c# login 居中 c# 考试软件 c# 自然语言分析 c# 分段读取文件 c# 泛型反射 c#打断点 c# 时间转多少秒 c# 线程函数加参数 c# modbus 读取 c#查询集合表