如何调整HTML页面和图像的大小

时间:2015-03-26 21:24:46

标签: html css

我有一个html页面,我在2列中显示数据。我在右栏中有一张图片。当页面缩小时,图像会下降到屏幕底部而不是不断变小。我确定我错过了一些简单的事情。这是代码:

<div id="page_content" style="left: 0px; top: 0px;overflow: auto;">
      <div style="position:relative;float:left;width:50%;padding: 0 10px 10px 20px;overflow: auto;">
    some text
      </div>
      <div style="position:relative;float:right;width:47%; padding-right: 5px;overflow: auto;">

                    <map id="FPMap0" name="FPMap0">
                    <area coords="453, 343, 579, 411" href="M/default.html" shape="rect" />
                    <area coords="455, 427, 580, 494" href="P/default.html" shape="rect" />
                    <area coords="17, 42, 164, 102" href="#1._Plan" shape="rect" />
                    <area coords="5, 150, 185, 269" href="#2._Mod" shape="rect" />
                    <area coords="284, 98, 430, 166" href="#3._Prep" shape="rect" />
                    <area coords="286, 176, 431, 241" href="#4._Cond" shape="rect" />
                    <area coords="285, 347, 423, 412" href="#5._Close" shape="rect" />
                    <area coords="286, 432, 423, 496" href="#6._Collect" shape="rect" />
                    <area coords="285, 525, 425, 569" href="#7._Analyze" shape="rect" />
                    </map>

                    <img  id="the_pic" style="vertical-align:top; top:5px; max-width:100%;max-height:100%;overflow: auto;"  src="images/img8.jpg" usemap="#FPMap0"/>

                    </div>
      </div>

我尝试做的是让图片根据需要调整大小而不移动。

0 个答案:

没有答案