关闭

图片在已固定宽度的DIV及TABLE中自适应

标签: divtableborder测试web
1283人阅读 评论(0) 收藏 举报
分类:

有一定web的经验的人都会了解,在固定的DIV或表格里放一张大过其宽高的图片,DIV或TABLE就会被图片撑开,使得原本精心布置好的页面被弄得一团糟。

现在有一张200*200px的图片,我们将其放在宽定义为150px的容器里[红色代表容器的边框],演示如下:

引用代码:

<div style="border: 1px solid #f00; width: 150px;"><img src="http://www.doyoe.com/UploadFiles/20070306092825365.gif" alt="测试效果" /></div>

 效果如下:

测试效果

上面的效果就是正常情况下会出现的,我们发现这张图片仍是以本身大小显示的,而它的容器则被撑大了。如何让图片能够自适应容器的大小呢?

引用代码:

<div style="border: 1px solid #f00; width: 150px;"><img src="http://www.doyoe.com/UploadFiles/20070306092825365.gif" alt="测试效果" style="width: 100%;" /></div>

 效果如下:

测试效果

图片之所以能依据容器大小自动调整,是因为给起加了一个STYLE。STYLE里面只需要一个WIDTH,用百分比,值任意取,意思是图片的宽为容器宽的百分之多少。为何图片能自适应,就一目了然。

原文地址:http://blog.doyoe.com/article.asp?id=5

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:47745次
    • 积分:989
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论
    飘零雾雨的相关链接