How to dynamically change the height and width of elements such as div when loading HTML pages automatically

jquery + CSS is needed here. The principle is to use JavaScript to dynamically change the height and width of a class when the page is loaded. This combination of JavaScript can dynamically get the height and width of the browser/page, so that the div can dynamically follow the size of the browse page changes and does not affect the aspect ratio. The following code creates a mobile page with three images per line and 33%, and the height and width of each image div will adapt as the browser size changes.

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Server"> <meta id="Viewport"Name="Viewport"Content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <title>test Photoview</title>"Text/javascript"Src="Js/jquery-1.11.1.min.js"></script><script type="Text/javascript">function Pageload () {varSize ={width:window.innerWidth||Document.body.clientWidth, Height:window.innerHeight||Document.body.clientHeight}varCW = (Size.width- -) /3; $('. Autowidth'). CSS ({'width': CW +'px' }); $('. Autowidth'). CSS ({'Height': CW +'px' }); } window.onload=pageload;</script><style>. bodyclass{background-color: #dedbdb; }. studentblock {font-family: Microsoft ya black;        }. studentblock:hover {border:2px solid blue; Border-Color:blue;    Cursor:pointer;        }. autowidth {height:100px; Background-Size:cover; Margin-left:8px; Margin-top:0px;        }. autowidth:hover {border:2px solid blue;    Cursor:pointer; }. tdsection {width: -%; Padding-bottom:5px; }</style><bodyclass="Bodyclass"><div style="Width:100%;height:1000px;overflow-x:hidden;overflow-y:hidden;"> <table style="width:100%"> <tr> &LT;TDclass="tdsection"> <divclass="Autowidth"style="background-image:url (' image/people1.jpg ');"></div> <div style="background-color: #ffffff; margin-left:8px;font-family: Microsoft Jacob Black; text-align:center;"> Spring outing </div> </td> &LT;TDclass="tdsection"> <divclass="Autowidth"style="background-image:url (' image/people1.jpg ');""></div><div style="background-color: #ffffff; margin-left:8px;align-content:center;font-family: Microsoft Jacob Black; text-align:center;"> Spring outing </div> </td> &LT;TDclass="tdsection"> <divclass="Autowidth"style="background-image:url (' image/people1.jpg ');"></div> <div style="background-color: #ffffff; margin-left:8px;align-content:center;font-family: Microsoft Jacob Black; text-align:center;"> Spring Outing </div> </td> </tr> &LT;/TABLE&GT;&L T;/div></body>
How to dynamically change the height and width of elements such as div when loading HTML pages automatically