《
用CSS的overflow控制图像的显示大小》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344352013.htm
<ul id="thumbs">
<li><a href=" src="image.jpg" /></a></li>
<li><a href=" src=",
用CSS提高网页在浏览器的渲染速度;image.jpg" /></a></li>
<li><a href=" src="image.jpg" /></a></li>
<li><a href=" src="image.jpg" /></a></li>
<li><a href=" src="image.jpg" /></a></li>
</ul>
Html代码不什么特殊之处，无非是一个无序列表，主要的在羡下面的CSS代码中：
img{
border:none;
}
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left,
用CSS控制网页总体风格;
margin-right:5px;
border:1px solid #999;
padding:2px;
}
ul#thumbs a{
display:block;/*此处使链接变为块状显示，才可以定义宽跟高*/
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;/*定义区域外隐蔽*/
position:relative;/*绝对对位*/
z-index:1; /*Z轴处于1的地位，为鼠标悬浮时做铺垫*/
}
ul#thumbs a img{
float:left;
position:absolute;/*让图像居中显示的定义局部，包含下面top、left的两处定位*/
top:-20px;/**/
left:-50px; /**/
}
ul#thumbs a:hover{ /*此处最为重要，当鼠标挪动到图像上时，让图像显示，Z轴位置为1000置于最上面*/
overflow:visible;
z-index:1000;
border:none;
}
将上面代码拷贝到文档里，然后预览一下，当鼠标移动到图像上时就可以显示全部的图片了,
用CSS控制打印(代码)，这样的后果比单单显示缩略图像更加生动。
Tag： 把持图像 overflow ,
用CSS控制IE下中英文字体显示对齐; CSS 节制图像 overflow CSS
--> [
网站建设之]用CSS的overflow掌握图像的显示大小
如上图所示，图片在区域中是居中的，<a>区域内是要显示的内容，<img>灰色区域是隐藏掉的。下面开端制作：
Html代码：
制造网页时常常碰到图像过大而不能完整展现的麻烦，固然咱们能够将图片缩小，但缩小的图片着实丢脸。
实在有的时候我们不必定非要将图片缩小或调换，可以用CSS的一些属性来展示图像，反而更加活泼有趣。
本文为你先容一种应用CSS的溢出属性overflow来控制显示图像大小的办法。
这种方式的原理是：在网页中插入一个固定大小的区域，将图像插入到这个区域内，而后将区域以外的内容全体暗藏掉,用CSS把标题超出的部分变成...。
(责任编辑：网站建设)
用CSS的overflow控制图像的显示大小相关文章