`

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;    (让多出来的不显示。)

  }

 

分享到:
评论

相关推荐

    纯div+css轮播图片切换图片

    图片切换是通过CSS控制图片的显示和隐藏,实现图片的动态变化。这通常涉及到CSS的`display`属性,通过改变图片的可见状态来实现切换。例如,可以创建多个包含图片的div,然后利用CSS选择器和定时器来交替更改这些div...

    经典DIV+CSS模板 经典DIV+CSS模板

    描述中的关键词如"div+css"、"web标准"、"div+css布局"、"div+css实例"、"div+css模板"揭示了这些模板遵循Web开发的最佳实践,旨在实现结构与表现的分离,提高网页的可维护性和可访问性。Web标准通常指的是W3C制定的...

    div+css布局大全

    CSS控制了元素的字体、颜色、大小、位置等视觉特性,使得网页设计更具表现力和灵活性。CSS布局是其核心功能之一,它决定了元素在页面上的排列方式。 3. **盒模型**:理解CSS布局的基础是盒模型,每个HTML元素都可视...

    整站模板DIV+CSS 源码DIV+CSS 

    【描述】"DIV+CSS 源码"进一步强调了这个主题,意味着我们将深入到实际的代码层面,了解如何通过Div元素配合CSS实现网页的布局、样式控制以及功能实现。Div常用于定义网页上的不同区域,而CSS则用于定义这些区域的...

    div+css页面布局,新手入门教材,2天学会div+css

    【div+css页面布局】是Web开发中的基础技术,用于构建网页的结构和样式。新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明: 1. **规划网站**:在开始布局前,...

    DIV+CSS案列源代码03

    【标题】"DIV+CSS案列源代码03"揭示了如何使用这两种技术来构建一个中国音乐网的网站。在网页设计中,`DIV`(层)和`CSS`(层叠样式表)是核心元素,它们共同负责网页布局和样式的设定。`DIV`是一个HTML标签,用于...

    红酒宣传DIV+CSS模板

    【标题】"红酒宣传DIV+CSS模板"是一个基于Web标准设计的网页模板,它利用了Div和CSS技术来实现精致的网页布局和样式控制。Div是HTML中的一个块级元素,用于组织页面结构,而CSS(层叠样式表)则负责定义这些Div元素...

    div+css后台登录模版

    总结来说,div+css后台登录模版是网页设计中的一种高效实践,它结合了Div的布局功能和CSS的样式控制,实现了美观且功能完善的登录界面。对于开发者而言,理解和掌握这一技术对于提升网页设计水平和项目实施效率具有...

    DIV+CSS绿色音乐模板

    总结来说,"DIV+CSS绿色音乐模板"是通过HTML的结构化标签和CSS的样式控制,配合图片和可能的JavaScript交互,打造出的一款以绿色为主调,富有音乐元素的网页模板。这样的模板既展示了DIV+CSS技术的强大,也提供了...

    div+css幻灯片效果

    在网页设计领域,"div+css 幻灯片效果"是一种常见的动态展示技术,它能够以优雅的方式展示一系列图片或内容,通常用于网站的首页、产品展示或新闻滚动等场景。这种技术不再依赖于传统的Flash插件,而是利用HTML的`...

    中文网站div+css

    此外,响应式设计是Div+CSS的一个重要应用,它允许网页根据设备屏幕大小自动调整布局,确保在不同设备上都能提供良好的用户体验。学习如何使用媒体查询(media queries)来实现响应式设计,是现代Web开发不可或缺的...

    DIV+CSS案例(21-30)

    在这个案例中,`DIV+CSS`被用来创建清晰的板块划分,如美食图片展示区、描述区和评论区,通过浮动(float)、定位(positioning)和盒模型(box model)来实现元素的排列和间距。 其次,"交通运输网"可能是一个展示...

    div+css网页模板

    8. **文件名称列表分析**:虽然没有具体的文件名提供,但通常一个"div+css网页模板"的压缩包会包含HTML文件(如index.html)、CSS文件(如style.css)和其他可能的资源文件(如图片、JavaScript脚本等)。...

    Div+Css特效及JavaScript网页特效实例.rar

    Div+CSS主要用于页面布局和样式控制,而JavaScript则负责交互性和动态效果。在这个"Div+Css特效及JavaScript网页特效实例"压缩包中,包含了两个子文件,分别专注于这两个领域的实际应用。 首先,我们来看"Div+CSS...

    div+css js图片轮播效果

    【标题】:“div+css js图片轮播效果” 在网页设计中,图片轮播是一种常见的交互元素,用于展示多张图片或内容,并在用户界面中以动态的方式切换。本项目着重探讨如何使用HTML的`div`元素、CSS样式以及JavaScript...

    绝对实用的DIV+CSS+JQUERY模板

    在“绝对实用的DIV+CSS+JQUERY模板”中,jQuery可能被用来实现诸如下拉菜单、滑动效果、图片轮播、表单验证等各种动态功能,提升用户体验。 【DIV】:在HTML中,`<div>`是一个通用的容器标签,用于组合其他HTML元素...

    DIV+CSS案列源代码06

    在网页设计领域,`DIV+CSS`是一种常用的技术组合,用于实现页面布局和样式控制。`DIV`(Division)是HTML中的一个通用容器元素,用于组织文档结构,而`CSS`(Cascading Style Sheets)则是用于定义这些元素样式和...

    css,div+css

    【CSS和Div+CSS布局详解】 CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。在网页设计中,`div+css`布局是一种常见的网页布局方式,它将结构...

    电子科技产品div+css全套企业网页模板

    《电子科技产品div+css全套企业网页模板》 在当今数字化时代,电子科技产品的网站设计至关重要,它不仅展示了公司的品牌形象,也是与用户交互的重要平台。本套“电子科技产品div+css全套企业网页模板”正是为满足这...

    搜集整理100套DIV+CSS网站样式模板

    通过这个资源,学习者可以深入理解如何使用DIV元素进行网页布局,如何通过CSS控制样式和布局,以及如何创建响应式设计以适应不同设备的屏幕尺寸。同时,这些模板也可以帮助初学者快速上手,减少从零开始设计网页的...

Global site tag (gtag.js) - Google Analytics