`

div+css 控制图片大小 防止图片撑破div

阅读更多

相信不少人在调用图片到网页的时候,经常会碰到图片太大了,从而撑破了DIV,导致网页变形,下面就介绍几种方法,可以有效控制图片撑破DIV。

   用css控制图片自适应大小,代码如:

  img {

  max-width: 600px;

  width:expression(this.width > 600 ? "600px" : this.width);

  overflow:hidden;

  }

  其中 max-width:600px; 在IE7、FireFox等其他非IE浏览器下最大宽度为600px,但在IE6中无效;width:600px; 在所有浏览器中图片的大小为600px,当图片大小大于600px,自动缩小为600px,在IE6中有效;而 overflow:hidden;  指将超出设置大小的部分隐藏,避免控制图片大小失败而引起的表格撑开变形。

  最后总结一下最实用的代码:

  如果是表格,请用:

  table {

  table-layout: fixed;

  word-break: break-all;

  }

  如果是div层,请用:

  div {

  table-layout: fixed;

  word-wrap: break-word;


  width: 加上宽度;

  overflow: hidden;    (让多出来的不显示。)

  }

 

分享到:
评论

相关推荐

    html5+div+css3网站样式模板

    html5+div+css3网站样式模板,漂亮的网站样式模板,有样式、图片

    DIV+CSS上下左右绝对居中

    DIV+CSS上下左右绝对居中

    图片自动轮播用li做上下控制柄div+css+jquery

    图片自动轮播用li做上下控制柄div+css+jquery 代码十分简洁,喜欢的话请给五分,不要吝啬你们的评论,楼主一行行代码敲的实在不容易!

    纯DIV+CSS网页示例

    CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题,改变字体颜色,字体样式等等。 5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 6....

    100多个JQuery效果示例(实例)div+css+javascrpit

    13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...

    div+css有实例,易学易懂

    div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...

    《精通CSS+DIV网页样式与布局》光盘源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    divcss布局大全 疯狂代码.zip

    2008年9月26日divcss布局入门实例目录:DIV+CSS布局入门示例(目录) 本示例通过五个步骤的介绍,基本形成了如下效果的页面。我们可以详细的阅读并动手试验这个示例的全过程:一、页面布局与规划 总体的美工构思,...

    DIV CSS实例教程:一款清新风格的CSS新闻列表制作

    XHTML代码很简单,就是一个无序列表,不过我们对标题和时间设置了不同的CLASS以方便控制。 Example Source Code

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    JS+css 图片自动缩放自适应大小

    我加了css的限制: 代码如下:div img {}{max-width:600px;width:600px;width:[removed]document.body.clientWidth>600?”600px”:”auto”);overflow:hidden;}◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大...

    网页特效 | 纯CSS控制DIV背景透明效果

    纯CSS控制DIV背景透明效果,没有什么好解释的,代码全在文件里面,直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b,前两位为16进制透明度, 比如说值是上面用到的...

    精通CSS+DIV网页样式与布局视频教材

    1.3.3 控制图片 1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择器 2.1.2 类别选择器 2.1.3 ID选择器 2.2 选择器声明 2.2.1 集体声明 2.2.2 选择器的嵌套 2.3 ...

    html+JS+CSS特效(居家旅行必备之良品)

    标签上下层滑动替换特效代码,超酷图片特效(适合做成flash),漂亮的导航条,选项卡,div+css制作房子,表格背景色动态控制,JS对表格增删查改,跟随上下以及左右滚动条滚动的层,可以折叠的表格, 选择日期控件,导航条,...

    控制一个DIV内所有图片宽度超出后自动调整为指定大小

    直接通过CSS控制一个DIV内所有图片宽度超过650PX时.自定为650PX;高度自适应! 些CSS代码是目前最简单有效的自动调整图片尺寸的方法,且兼容IE6 IE7 IE8 和FF等版本的浏览器

    精通CSS+DIV网页样式与布局全集

    1.2.3 链接式 1.2.4 导入样式 1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制图片 1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择...

    CSS+DIV技术

    Css优势、使用css控制页面的方法、体验css、css基本语法、CCSS图片效果、SS文字效果、Css+div 美化和布局、CSS+div布局方法

    2天掌握DIV CSS网页制作技术

    【基础一】DIV+CSS的叫法是不准确的 【基础二】使用Table布局是不明智的 【基础三】xHTML+CSS与SEO 【基础四】CSS如何控制页面 【基础五】CSS选择器 【基础六】CSS选择器命名及常用命名 【基础七】盒子模型 【基础八...

    精通CSS.DIV.网页样式与布局 源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一...

    精通CSS+DIV网页样式与布局

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

Global site tag (gtag.js) - Google Analytics