页面图片的缩放问题

之前遇到过几次关于页面里面图片的缩放问题，所以就以为自己熟悉了，就没记下来，刚同事又问到这个问题，我按照脑子里记的就给同事说了一遍，但是调试的时候，发现演示的效果不是对图片进行缩放，而是剪切。注意力一下子全被拉到这个问题上了。经过一番摸索，发现问题出现在图片的路径上。按照我讲的那种方法，图片在页面里面的代码应该写成<image src="themes/blue/images/photobg.gif "/>这种格式。但是我给同事讲的时候图片是<image class="photobg" />把图片放在class里面。所以我怎么调试都显示的是剪裁或者是原图，不会进行缩放。

对于一个固定的容器，想让图片适应这个容器的大小，方法如下

<div class="div1">
    <img src="图片存放的路径" />
</div>

.div1 img{
    width:87px;//图片的宽度
    height:100px;//图片的高度
　　vertical-align:text-top;//图片对齐文字的顶部
}

效果显示如下

对图片进行缩小

.div1 img{
    width:56px;//图片的宽度
    height:70px;//图片的高度
　　vertical-align:text-top;//图片对齐文字的顶部
}

对图片进行放大

.div1 img{
    width:156px;//图片的宽度
    height:177px;//图片的高度
　　vertical-align:text-top;//图片对齐文字的顶部
}