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

原创 2007年09月29日 08:54:00

有一定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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

实现三个并排div,两边固定宽度,中间自适应的四个方法

看了些文档和网上的资源,大概有四种方法。如有错误,欢迎各位指正。以下先贴代码再来解释 三个div并排 *{ margin: ...

实现三个并排div,两边固定宽度,中间自适应的四个方法

个人整理的实现三个并排div,两边固定宽度,中间自适应的四个方法,废话不多说,先上代码,可以直接复制看效果。 Document html,body{width:100...

css+div+图片实现宽度自适应圆角框

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 自适应宽度...

【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)

以前在网上看到过,说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实,这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中...

水平自适应居中 宽高固定的div 宽高不知道的div 左右两边固定宽度div

红色代码 :图一  左右两边固定宽度div,(随屏幕宽度改变)中间div自适应填满中间的空间 紫色代码:图二  宽高固定的div,(随屏幕宽度改变)水平自适应居中 蓝色代码:图三 宽高不知...

css+div自适应窗口宽度

  • 2010-04-29 21:54
  • 96KB
  • 下载

CSS三栏布局——中间固定两边自适应宽度

转自:W3CPLUS 今天与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用...

html css实现左右两列固定宽度中间自适应效果

实现有很多方法 浮动,固定定位,和css布局,这篇文章通过浮动和display:table-sell 两种方法来实现。1.float和margin css部分:.main{overflow:...

html 三列布局(两列固定宽度,一列自适应)

摘要:最近在做移动端页面布局,偶有心得,记录于此。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)