How to make the following html code fit to all resolution?_问答_开发者

Since the html code is so long and i can't post here. Sorry to spare you a few second to look at the page: http://foodil.zxq.net/

<head>
<meta http-equiv=Content-Type content="text/html; charset=big5">
<link rel=File-List href="index_files/filelist.xml">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
b\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title>Page Title</title>
<style>
<!--
 /* Font Definitions */
@font-face
    {font-family:"Gill Sans MT";
    panose-1:2 11 5 2 2 1 4 2 2 3;}
@font-face
    {font-family:Garamond;
    panose-1:2 2 4 4 3 3 1 1 8 3;}
@font-face
    {font-family:"Lucida Sans Typewriter";
    panose-1:2 11 5 9 3 5 4 3 2 4;}
@font-face
    {font-family:新細明體;
    panose-1:2 2 5 0 0 0 0 0 0 0;}
 /* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:.075pt;
    line-height:110%;
    text-align:left;
    font-family:Garamond;
    font-size:10.5pt;
    color:black;}
h4
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:6.0pt;
    text-align:left;
    font-family:Garamond;
    font-size:12.0pt;
    color:black;
    font-style:italic;
    font-weight:normal;}
p.MsoListBullet2, li.MsoListBullet2, div.MsoListBullet2
    {margin-left:8.6pt;
    margin-right:0pt;
    text-indent:-8.6pt;
    margin-top:0pt;
    margin-bottom:6.0pt;
    line-height:84%;
    text-align:left;
    font-family:"Gill Sans MT";
    font-size:10.0pt;
    color:black;}
p.MsoTitle3, li.MsoTitle3, div.MsoTitle3
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:center;
    font-family:"Lucida Sans Typewriter";
    font-size:36.0pt;
    color:white;
    font-weight:bold;}
p.MsoAccentText, li.MsoAccentText, div.MsoAccentText
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:left;
    font-family:"Gill Sans MT";
    font-size:10.0pt;
    color:black;}
p.MsoAccentText4, li.MsoAccentText4, div.MsoAccentText4
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:left;
    font-family:"Gill Sans MT";
    font-size:9.0pt;
    color:white;
    font-weight:bold;}
p.MsoAccentText7, li.MsoAccentText7, div.MsoAccentText7
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:left;
    font-family:"Lucida Sans Typewriter";
    font-size:9.0pt;
    color:black;
    font-weight:bold;}
p.MsoAccentText8, li.MsoAccentText8, div.MsoAccentText8
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:right;
    font-family:"Gill Sans MT";
    font-size:9.0pt;
    color:white;
    font-weight:bold;}
p.MsoOrganizationName, li.MsoOrganizationName, div.MsoOrganizationName
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:center;
    font-family:"Lucida Sans Typewriter";
    font-size:12.5pt;
    color:black;
    font-weight:bold;}
p.MsoBodyTextIndent3, li.MsoBodyTextIndent3, div.MsoBodyTextIndent3
    {margin-right:0pt;
    text-indent:13.5pt;
    margin-top:0pt;
    margin-bottom:0pt;
    line-height:114%;
    text-align:justify;
    text-justify:inter-ideograph;
    font-family:"Times New Roman";
    font-size:10.0pt;
    color:black;}
ol
    {margin-top:0in;
    margin-bottom:0in;
    margin-left:-2197in;}
ul
    {margin-top:0in;
    margin-bottom:0in;
    margin-left:-2197in;}
@page
    {size:8.-2019in 11.2232in;}
-->
</style>
<!--[if gte mso 9]><xml>
 <o:shapedefaults v:ext="edit" spidmax="14342" fill="f" fillcolor="white [7]"
  strokecolor="black [0]">
  <v:fill color="white [7]" color2="white [7]" on="f"/>
  <v:stroke color="black [0]" color2="white [7]">
   <o:left v:ext="view" color="black [0]" color2="white [7]"/>
   <o:top v:ext="view" color="black [0]" color2="white [7]"/>
   <o:right v:ext="view" color="black [0]" color2="white [7]"/>
   <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
   <o:column v:ext="view" color="black [0]" color2="white [7]"/>
  </v:stroke>
  <v:shadow color="#ccc [4]"/>
  <v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
  <o:colormru v:ext="edit" colors="#777,#db1101,#b2b2b2,red,blue,#e5e5e5,#5f5f5f,#111"/>
 </o:shapedefaults><o:shapelayout v:ext="edit">
  <o:idmap v:ext="edit" data="1"/>
 </o:shapelayout></xml><![endif]-->
</head>

<body link=maroon vlink="#996600" bgcolor="#777777"
background="index_files/image568.jpg" style='margin:0' width=100%>
<!--[if gte vml 1]><v:background id="_x0000_s3073" o:bwmode="white"
 fillcolor="#777" o:targetscreensize="1366,768">
 <v:fill angle="-90" focus="100%" type="gradient"/>
</v:background><![endif]-->

<div style='position:absolute;width:8.-1863in;height:11.0484in'>
<!--[if gte vml 1]><v:shapetype id="_x0000_t202" coordsize="21600,21600" o:spt="202"
 path="m,l,21600r21600,l21600,xe">
 <v:stroke joinstyle="miter"/>
 <v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1028" type="#_x0000_t202" style='position:absolute;
 left:144.56pt;top:195.59pt;width:130.4pt;height:527.24pt;z-index:4;
 visibility:visible;mso-wrap-edited:f;mso-wrap-distance-left:2.88pt;
 mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
 mso-wrap-distance-bottom:2.88pt' fillcolor="#f5e0d6 [3]" strokecolor="#db1101"
 strokeweight=".5pt" insetpen="t" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke>
  <o:left v:ext="view" color="#db1101" weight=".5pt" joinstyle="miter"
   insetpen="t"/>
  <o:top v:ext="view" color="#db1101" weight=".5pt" joinstyle="miter"
   insetpen="t"/>
  <o:right v:ext="view" color="#db1101" weight=".5pt" joinstyle="miter"
   insetpen="t"/>
  <o:bottom v:ext="view" color="#db1101" weight=".5pt" joinstyle="miter"
   insetpen="t"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:shadow color="#ccc [4]"/>
 <o:lock v:ext="edit" shapetype="t"/>
 <v:textbox style='mso-column-margin:5.7pt' inset="2.85pt,2.85pt,2.85pt,2.85pt">
  <div dir=ltr>
  <p class=MsoBodyTextIndent3 style='text-indent:0pt'><span lang=en-US
  style='font-size:9.0pt;font-family:"Gill Sans MT";language:en-US'>In spite of the significant improvements in face recognition technology over the past two decades, </span><span
  lang=en-US style='font-size:9.0pt;font-family:"Gill Sans MT";font-style:italic;
  language:en-US'>unconstrained</span><span lang=en-US style='font-size:9.0pt;
  font-family:"Gill Sans MT";language:en-US'> face recognition remains a challenging problem due to the large intra-subject variations and small inter-subject variations (see </span><a
  href="index_files/Page512.htm"><span lang=en-US style='font-size:9.0pt;
  font-family:"Gill Sans MT";color:blue;text-decoration:underline;language:
  en-US'>Fig. 1</span></a><span lang=en-US style='font-size:9.0pt;font-family:
  "Gill Sans MT";language:en-US'>). Even though some of the major so开发者_开发问答urces of intra-subject variations (</span><span
  lang=en-US style='font-size:9.0pt;font-family:"Gill Sans MT";font-style:italic;
  language:en-US'>e.g.</span><span lang=en-US style='font-size:9.0pt;
  font-family:"Gill Sans MT";language:en-US'>, pose, expression and illumination) can be controlled in constrained imaging environments (</span><span
  lang=en-US style='font-size:9.0pt;font-family:"Gill Sans MT";font-style:italic;
  language:en-US'>e.g.</span><span lang=en-US style='font-size:9.0pt;
  font-family:"Gill Sans MT";language:en-US'>, driver license and passport), age variation is still a challenge in face recognition applications.</span></p>
  <p class=MsoBodyTextIndent3 style='text-indent:0pt'><span lang=en-US
  style='font-size:9.0pt;font-family:"Gill Sans MT";language:en-US'>&nbsp;</span></p>
  <p class=MsoBodyTextIndent3 style='text-indent:0pt'><span lang=en-US
  style='font-size:9.0pt;font-family:"Gill Sans MT";language:en-US'>Most of the age invariant face recognition methods proposed in the literature can be categorized into two major classes </span></p>
  </div>
 </v:textbox>
</v:shape><![endif]--><![if !vml]><span style='position:absolute;z-index:4;
left:192px;top:260px;width:176px;height:705px'><img width=176 height=705
src="index_files/image299.gif"
alt="Text Box: In spite of the significant improvements in face recognition technology over the past two decades, unconstrained face recognition remains a challenging problem due to the large intra-subject variations and small inter-subject variations (see Fig. 1). component based approach uses combinations of segmented facial components to generate  aging simulated image. After the aging simulation, the appearance difference between probe and gallery images becomes smaller, resulting in an improved recognition accuracy. Discriminative approaches do not attempt to explicitly learn the appearance changes across ages, but they learn robust feature sets that are invariant to aging variations. As in the generative approaches, &#13;"
v:shapes="_x0000_s1028"></span><![endif]><!--[if gte vml 1]><v:shape id="_x0000_s1029"
 type="#_x0000_t202" style='position:absolute;left:144.56pt;top:144.56pt;
 width:408.19pt;height:45.36pt;z-index:5;visibility:visible;mso-wrap-edited:f;
 mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
 mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' fillcolor="#ccc [4]"
 strokecolor="#db1101" strokeweight=".5pt" insetpen="t" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke>
  <o:left v:ext="view" color="#db1101" weight="0" joinstyle="miter" insetpen="t"/>
  <o:top v:ext="view" color="#db1101" weight="0" joinstyle="miter" insetpen="t"/>
  <o:right v:ext="view" color="#db1101" weight="0" joinstyle="miter"
   insetpen="t"/>
  <o:bottom v:ext="view" color="#db1101" weight="0" joinstyle="miter"
   insetpen="t"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:shadow color="#ccc [4]"/>
 <o:lock v:ext="edit" shapetype="t"/>
 <v:textbox style='mso-column-margin:5.7pt' inset="2.85pt,2.85pt,2.85pt,2.85pt">
  <div dir=ltr>
  <p class=MsoNormal style='text-align:center;margin-bottom:0pt;line-height:
  114%;text-align:center'><span lang=en-US style='font-size:19.6pt;line-height:
  114%;font-family:"Gill Sans MT";font-weight:bold;language:en-US'>Age-Invariant Face Recognition</span></p>
  <p class=MsoNormal style='text-align:center;margin-bottom:0pt;line-height:
  114%;text-align:center'><span lang=en-US style='font-size:10.0pt;line-height:
  114%;font-family:"Gill Sans MT";language:en-US'>Unsang Park and Anil K. Jain</span></p>
  <p class=MsoNormal style='text-align:center;margin-bottom:10.0pt;line-height:
  114%;text-align:center'><span lang=en-US style='font-size:19.6pt;line-height:
  114%;font-family:"Gill Sans MT";font-weight:bold;language:en-US'>asd</span></p>
  <p class=MsoNormal style='text-align:center;margin-bottom:10.0pt;line-height:
  114%;text-align:center'><span lang=en-US style='font-size:8.0pt;line-height:
  114%;font-family:"Gill Sans MT";font-weight:bold;language:en-US'>&nbsp;</span></p>
  </div>
 </v:textbox>
</v:shape><![endif]--><![if !vml]><span style='position:absolute;z-index:5;
left:192px;top:192px;width:546px;height:62px'><img width=546 height=62
src="index_files/image305.gif"
alt="Text Box: Age-Invariant Face Recognition&#13;Unsang Park and Anil K. Jain&#13;"
v:shapes="_x0000_s1029"></span><![endif]><!--[if gte vml 1]><v:group id="_x0000_s1030"
 style='position:absolute;left:144.56pt;top:93.54pt;width:408.19pt;height:49.71pt;
 z-index:6' coordorigin="1108901,1056767" coordsize="61471,11623">
 <v:oval id="_x0000_s1031" style='position:absolute;left:1108901;top:1056767;
  width:61472;height:11624;visibility:visible;mso-wrap-edited:f;
  mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
  mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' fillcolor="black [0]"
  stroked="f" strokecolor="black [0]" strokeweight="0" insetpen="t"
  o:cliptowrap="t">
  <v:fill opacity="58982f" color2="white [7]"/>
  <v:stroke>
   <o:left v:ext="view" color="black [0]" color2="white [7]"/>
   <o:top v:ext="view" color="black [0]" color2="white [7]"/>
   <o:right v:ext="view" color="black [0]" color2="white [7]"/>
   <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
   <o:column v:ext="view" color="black [0]" color2="white [7]"/>
  </v:stroke>
  <v:shadow color="#ccc [4]"/>
  <o:lock v:ext="edit" shapetype="t"/>
  <v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
 </v:oval><v:shape id="_x0000_s1032" type="#_x0000_t202" style='position:absolute;
  left:1115344;top:1058870;width:48586;height:7418;visibility:visible;
  mso-wrap-edited:f;mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
  mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' filled="f"
  fillcolor="white [7]" stroked="f" strokecolor="black [0]" strokeweight="0"
  insetpen="t" o:cliptowrap="t">
  <v:fill opacity="58982f" color2="white [7]"/>
  <v:stroke>
   <o:left v:ext="view" color="black [0]" color2="white [7]"/>
   <o:top v:ext="view" color="black [0]" color2="white [7]"/>
   <o:right v:ext="view" color="black [0]" color2="white [7]"/>
   <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
   <o:column v:ext="view" color="black [0]" color2="white [7]"/>
  </v:stroke>
  <v:shadow color="#ccc [4]"/>
  <o:lock v:ext="edit" shapetype="t"/>
  <v:textbox style='mso-column-margin:5.7pt' inset="2.85pt,2.85pt,2.85pt,2.85pt">
   <div dir=ltr>
   <p class=MsoTitle3><span lang=en-US style='font-size:24.0pt;font-family:
   "Gill Sans MT";language:en-US'>Newsletter</span></p>
   </div>
  </v:textbox>
 </v:shape></v:group><![endif]--><![if !vml]><span style='position:absolute;
z-index:6;left:192px;top:124px;width:546px;height:68px'><img width=546
height=68 src="index_files/image313.gif" v:shapes="_x0000_s1030 _x0000_s1031 _x0000_s1032"></span><![endif]><!--[if gte vml 1]><v:shape
 id="_x0000_s1033" type="#_x0000_t202" style='position:absolute;left:42.51pt;
 top:238.11pt;width:98.26pt;height:204.42pt;z-index:7;visibility:visible;
 mso-wrap-edited:f;mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
 mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' fillcolor="#e5e5e5"
 strokecolor="#db1101" strokeweight="0" insetpen="t" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke dashstyle="longDash">
  <o:left v:ext="view" dashstyle="longDashDot" color="#db1101" weight="0"
   joinstyle="miter" insetpen="t"/>
  <o:top v:ext="view" dashstyle="longDashDot" color="#db1101" weight="0"
   joinstyle="miter" insetpen="t"/>
  <o:right v:ext="view" dashstyle="longDashDot" color="#db1101" weight="0"
   joinstyle="miter" insetpen="t"/>
  <o:bottom v:ext="view" dashstyle="longDashDot" color="#db1101" weight="0"
   joinstyle="miter" insetpen="t"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:shadow color="#ccc [4]"/>
 <o:lock v:ext="edit" shapetype="t"/>
 <v:textbox style='mso-column-margin:5.7pt' inset="2.85pt,2.85pt,2.85pt,2.85pt">
  <div dir=ltr>

</div>

</body>

</html>

As i know that to fit resolution require to define element in perctange, however, Since these code have already defined a fixed size, are there any easier way/ any approach to make the html code fit the resolution of all size? Thanks,

Well, the result IS broken indeed (as said above), and I don't know about Microsoft's VML, but you should be able to fit into every resolution by using a fixed-width layout. How is this done, you ask? well, simply by using a wrapper with a fixed width somewhere around the smallest resolution you want to support (for example, 600px should provide an interesting amount of coverage, although in such cases you usually make specific styles, as the only screens with 600px width tend to be tablets/phones/etc.

Something like this:

<!DOCTYPE HTML>
<html>
<head>

<title>Test</title>

<style>
    * {
        margin: 0;
        padding: 0;
    }    

    body,html {
        width: 100%;
        height: 100%;
    }

    div#site-wrapper {
        width: 600px;
        margin: 0 auto;
    }
</style>

</head>

<body>
    <!-- This area should be a 600px container centered in your page -->
    <div id="site-wrapper">
        <header>
            <h1>My site</h1>
        </header>

        <section>
            <header>
                <h2>This is h2</h2>
            </header>

            <p>This is my section's content</p>
        </section>
    </div>
</body>
</html>