`
yaobiao753
  • 浏览: 14895 次
  • 性别: Icon_minigender_1
  • 来自: 太原
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

图片自适应,防止表格被撑开或div层被撑开 (转)

阅读更多
防止表格被撑开或div层被撑开的多种方法:

我使用了第四种,没发生什么意外,在这里和大家分享下,其他方法老师也讲过

二、使用如下代码:<img src="20080221104525991.jpg" ōnload="javascrīpt:if(this.width>600}{this.resized=true;this.style.width=600;}">

这种方法会在调用图片的时候,自动按比例缩小到指定的宽度,不会引起图片的变形,并且也不会撑破表格,但是缺点是,如果图片太大,在图片下载过程中,也就是图片显示过程中,会先以图片原大小显示,这时就会撑破表格,页面很难看,二当图片完全显示后,图片又会自动缩小。

三、我们可以针对表格的属性来限制大小防止被撑开,比如在<table width="600" border="0" cellpadding="0" cellspacing="0">里添加代码“style="table-layout:fixed;word-wrap:break-word; word-break;break-all;"”,其中“table-layout:fixed; ”是为了将表格布局固定住,就可以有效地防止表格被撑开,“word-wrap:break-word; ”是控制换行的,也就是强制执行换行,这个在文本内容较多的情况下需要使用到,特别是重复的内容出现,不执行换行的话,表格就被撑开了;而“word- break: break-all; ”可以解决IE的框架被英文(非亚洲语言文本行)撑开的问题,但是不会强制换行,只显示表格宽度里的内容。一般情况下只要用到“style="table-layout:fixed;word-wrap:break-word;"”就可以。当然,上面调用的语句可以定义在css里,比如
table {
table-layout: fixed;
word-wrap:break-word;
}

四、用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如何强制宽度不被内部DIV撑开

    本文将详细探讨如何通过CSS属性实现这一目标,确保外部`&lt;div&gt;`的宽度不会被内部`&lt;div&gt;`撑开。 ### CSS中的`overflow`属性 在HTML文档中,当内部元素的尺寸超过其父级元素的尺寸时,默认情况下,父级元素会自动调整...

    网页表格或div层在网页中被撑开解决之道

    这样,图片过大时会被自动缩放,并隐藏超出部分,避免表格或div层被撑开。 5. **针对表格和div层的通用解决方案**: - 对于表格,推荐使用`table {table-layout: fixed;word-break: break-all;}`。`table-layout: ...

    div+css高度自适应

    ### div+css高度自适应详解 #### 一、引言 在前端开发中,随着屏幕尺寸的多样化以及响应式设计的需求日益增长,实现元素的高度自适应成为了一个重要的课题。高度自适应不仅能够确保页面在不同设备上的良好展示,还...

    里面的div怎么撑开外面的div让高度自适应

    标题和描述中提到的问题正是关于这个需求:如何让内部的 `div` 撑开外部的 `div`,使得外部 `div` 的高度能随内容增多而自适应。 在正常情况下,如果内部 `div` 的内容高度超过外部 `div` 的固定高度,外部 `div` ...

    Div父容器不根据内容自适应高度的解决

    当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。

    子元素div高度不确定时父div高度如何自适应

    Div即父容器不根据内容自适应高度,我们看下面的代码: 复制代码代码如下: &lt;div id=”main”&gt; &lt;div id=”content”&gt;&lt;/div&gt; &lt;/div&gt; 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好...

    父div高度不能自适应子div高度的解决方案

    第二种解决方案是使用一个高度为1px的div或br标签来实现高度的撑开,其CSS样式如下: ```html &lt;div style="height:1px; margin-top:-1px; clear:both; overflow:hidden;"/&gt; ``` 或者 ```html ;"/&gt; ``` 在这个...

    CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器).docx

    这里的`width="10"`是一个技巧,即使得表格在没有图片时也有一个最小宽度,但实际图片会自动撑开表格,因此这个设置不会影响图片的显示。 这种方案的一个关键优点是它的跨浏览器兼容性。经过测试,它在IE、Firefox...

    DIV设置浮动后无法撑开外部DIV的解决办法

    如果`.child` 设置了 `float: left` 或 `float: right`,它将会浮动到父元素的左侧或右侧,而`.parent`则不会根据`.child`的高度自适应。这可能导致`.parent`的显示不完整,因为它无法检测到内部浮动元素的真实高度...

    div+css实现自适应宽度按钮

    div+css实现自适应宽度按钮 在本节中,我们将学习如何使用div+css实现自适应宽度按钮。自适应宽度按钮是一种常见的UI组件,能够根据按钮的内容自动调整宽度,而不需要手动设置宽度。 标题解释 标题“div+css实现...

    Vue下textarea文本框根据内容自适应改变高度

    Vue提供了便捷的数据绑定和响应式系统,我们可以利用这些特性来实现自适应高度的功能。 ```html &lt;div class="auto-height-textarea"&gt; ref="textarea" :rows="rows" @input="adjustHeight" v-model="value...

    多个div能不换行吗?

    让我们深入探讨一下如何让多个 `div` 元素在同一行内显示,并讨论如何使父容器自适应子元素的大小。 首先,我们要理解默认情况下,`div` 是块级元素,它们会占据一整行并垂直堆叠。如果希望多个 `div` 在同一行内...

    父DIV自动适应子DIV高度

    在网页设计中,布局是至关重要的一个环节,而“父DIV自动适应子DIV高度”是一个常见的需求,尤其在响应式设计和动态内容加载时。这个主题涉及到CSS布局、盒模型理解以及动态高度处理等多个知识点。 首先,我们来...

    div模拟textarea文本域实现高度自适应效果代码

    综上所述,通过使用div和HTML5的contenteditable属性结合CSS样式,我们可以实现一个功能强大、用户体验更佳的文本编辑区域,其高度能够随着内容的增加或减少而自适应变化,从而提供更加灵活和便捷的界面交互体验。

    div控制最小高度又自适高度

    在IE6中,如果子`div`的高度超过了父`div`,父`div`会被自动撑开,因此可以直接通过设置`height`属性来实现。然而,从IE7开始以及Firefox浏览器,这种行为不再默认发生,它们不会自动调整父容器的高度。这就需要我们...

    软件工程师 面试题 DIV+CSS_必考题

    Firefox等标准浏览器中,固定高度的容器不会被内容自动撑开。要实现既固定高度又能根据内容自适应,可以使用`min-height`,同时为了兼容IE6,可以设置`height:auto!important; height:200px; min-height:200px;`。 ...

    web容器如何自适应视口大小

    若想让一个块元素(如div)的高度与屏幕高度自适应,始终充满屏幕,需要从html层开始层层添加height=100%,而又因为html,body元素的width默认就是100%,因此在里面的div 设定width=100%时就能和屏幕等宽。 方法一:...

    css中间自适应布局的5种解法详解

    优点是兼容性好,但缺点是需要清除浮动以防止影响其他元素,并且当高度不固定时,中间内容被撑开会导致左右两栏不变。 2. **方案二:绝对定位(Absolute Positioning)** 通过设置元素的`position: absolute`,...

Global site tag (gtag.js) - Google Analytics