HTML的Height=auto的说明

 

---------------------------HTML的CSS样式定义-----------------------

 <style>

    #myDiv{
        background-color:#000000;-->表示黑色背景（就是上图看见的部分）
        width:700px;--->上图黑色部分的宽度
        height:400px;--->上图黑色部分的高度
        position:relative;-->相对位置
        border:1px solid #FFFFFF;---->设置边缘样式
       
    }
   
    img{
        width:100%;--->它的宽度设为100%， 就是把上图的黑色的部分的width=img.width=700px
        height:auto;---->看看它的作用是什么
        border:0px solid #FFFFFF;
        display:block;
    }
   
</style>

---------------------------有这样的样式定义-----------------------

 

 

---------------------------HTML里的DIV声明----------------------

 

<div id="myDiv">
    <div><a href="#"><img src="images/dreamweaver.png" /></a></div>
   
    <div><a href="#"><img src="images/director.png" /></a></div>
   
    <div><a href="#"><img src="images/flash.png" /></a></div>
   
    <div><a href="#"><img src="images/freehand.png" /></a></div>
   
    <div><a href="#"><img src="images/swf-player.png" /></a></div>
   
    <div><a href="#"><img src="images/coldfusion.png" /></a></div>

</div>

---------------------------HTML里的DIV声明----------------------

首先，我们把

img{
        width:100%;--->它的宽度设为100%， 就是把上图的黑色的部分的width=img.width=700px
        height:auto;---->改成height=100%
        border:0px solid #FFFFFF;
        display:block;
    }

看看效果！（看见了么？？ 蓝色的球正好填充了整个黑色的框子）

即 蓝色的球的宽度=黑色框的的宽度=700px

蓝色的球的高度=黑色框的的高度=400px

由此，我们可以大胆的设想一下，height=auto是根据图片的宽度来决定的

我们图片的宽度为width=100%,说明宽度得拉伸到黑色宽度,700px

但是我们本来的图片的大小为75x75,所以它的放大比例是700/75=9.33;由于

height=auto 所以height=9.33*75=700

最后对最顶上的图片验证一下：果然700x700