用CSS的overflow控制图像的显示大小

2020-03-24 17:01:44

字体：大中小

来源：转载

供稿：网友

制作网页时经常遇到图像过大而不能完全展示的麻烦，虽然我们可以将图片缩小，但缩小的图片着实难看。

其实有的时候我们不一定非要将图片缩小或替换，可以用CSS的一些属性来展现图像，反而更加生动有趣。

本文为您介绍一种利用CSS的溢出属性overflow来控制显示图像大小的方法。

这种方法的原理是：在网页中插入一个固定大小的区域，将图像插入到这个区域内，然后将区域以?外的内容全部隐藏掉。

如上图所示，图片在区域中是居中的， a 区域内是要显示的内容， img 灰色区域是隐藏掉的。下面开始制作：

Html代码：

ul id="thumbs"
li a href="http://dreamweaver.abang.com" img src="image.jpg" / /a /li
li a href="http://dreamweaver.abang.com" img src="image.jpg" / /a /li
li a href="http://dreamweaver.abang.com" img src="image.jpg" / /a /li
li a href="http://dreamweaver.abang.com" img src="image.jpg" / /a /li
li a href="http://dreamweaver.abang.com" img src="image.jpg" / /a /li
/ul
Html代码没有什么特别之处，无非是一个html' target='_blank'>无序列表，重要的在羡下面的CSS代码中：

img{
border:none;
}
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
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;
}
将上面代码拷贝到文档里，然后预览一下，当鼠标移动到图像上时就可以显示全部的图片了，这样的效果比单单显示缩略图像更加生动html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：src或者css背景图的url值为base64编码代码

下一篇：分享XHTML和CSS常见问题和解决方案