图片在已固定宽度的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

如何一个td或table里的图片等比例缩小(css问题)图片自动缩放

网上说了一大堆,说什么设置div的宽度,特别是这篇: http://www.divcss5.com/wenji/w632.shtml 害死人,我们为什么要自动缩放?还不是手机屏幕太多分辨率了?...

图片大小固定的html+css图片提交按钮代码

最近做手机端的开发有时会遇上点击两次按钮才会触发事件的情况,那么该如何来解决呢? 1、示例一、图片大小固定但是文字已经写到了图片上的html+css图片提交按钮代码 示例一、 图片大小...

CSS左侧固定宽 右侧自适应(兼容所有浏览器)

左侧固定宽,右侧自适应屏幕宽; 左右两列,等高布局; 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现; 仔细分析试题要求...

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

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

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

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

css三列布局,中间div固定,两侧div宽度自适应

中间固定,两侧宽度自适应 1-3-1一列固定,中间div固定 *{ margin: 0; padding: 0; -moz-box-sizing: border-bo...

两个div,一个固定宽度和一个自适应宽度

两个div,一个固定宽度和一个自适应宽度 参考 https://www.cnblogs.com/liko/archive/2012/11/07/2759285.html 主要补充哪个div先...

div或img图片高度随宽度自适应

一、可以利用js判断图片的宽度从而实现自适应。 二、只利用css来实现图片高度的自适应问题。...
  • zh_rey
  • zh_rey
  • 2017年04月08日 11:39
  • 11433

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

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

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

以前在网上看到过,说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实,这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片在已固定宽度的DIV及TABLE中自适应
举报原因:
原因补充:

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