之前遇到过几次关于页面里面图片的缩放问题,所以就以为自己熟悉了,就没记下来,刚同事又问到这个问题,我按照脑子里记的就给同事说了一遍,但是调试的时候,发现演示的效果不是对图片进行缩放,而是剪切。注意力一下子全被拉到这个问题上了。经过一番摸索,发现问题出现在图片的路径上。按照我讲的那种方法,图片在页面里面的代码应该写成<image src="themes/blue/images/photobg.gif "/>这种格式。但是我给同事讲的时候图片是<image class="photobg" />把图片放在class里面。所以我怎么调试都显示的是剪裁或者是原图,不会进行缩放。
对于一个固定的容器,想让图片适应这个容器的大小,方法如下
<div class="div1"> <img src="图片存放的路径" /> </div> .div1 img{ 87px;//图片的宽度 height:100px;//图片的高度
vertical-align:text-top;//图片对齐文字的顶部 }
效果显示如下
对图片进行缩小
.div1 img{
56px;//图片的宽度
height:70px;//图片的高度
vertical-align:text-top;//图片对齐文字的顶部
}
对图片进行放大
.div1 img{
156px;//图片的宽度
height:177px;//图片的高度
vertical-align:text-top;//图片对齐文字的顶部
}