<转载>CSS解决图片过大撑破DIV的方法

DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法。

图片撑破宽度解决方法、CSS设置div层宽度图片大于设置div宽度后撑破div固定宽度解决方法方案,隐藏图片超出撑破宽度方法。

一、防止图片撑破DIV方法一

原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。

常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下,进行图片编辑处理的。

二、防止图片撑开DIV方法二

如果不处理照片方法适应DIV有限宽度,那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。

三、解决方法三

对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片,不会影响图片画面质量。

比如你的网页DIV宽度为500px,那你上传图片后对img标签设置width等于500以下即可。
<img src="图片路径" width="小于你的DIV宽度" />即可解决图片过宽导致DIV SPAN撑破,这样好处可以等比例放大缩小图片。

四、CSS解决撑破方法四

这种方法使用CSS直接对div内的img进行宽度设置,这样不好是如果图片过小会影响网页浏览图片时候效果。

Div结构:<div class="divcss5"><img src="图片路径" /></div>
对应CSS代码:.divcss5 img{width:宽度值+单位}

五、CSS解决图片撑破撑开DIV方法五

使用max-width(最大宽度),比如你DIV宽度为500px,那你对应DIV样式再加入最大宽度CSS样式“max-width="500px"”即可解决,但是在IE6浏览器不兼容此属性,谨慎使用。

六、解决图片撑破DIV层方法总结与推荐

1)、最大宽度(max-width)+overflow:hidden。我们这样设置可以让IE6版本以上浏览器支持最大宽度样式,也让IE6下隐藏图片超出宽度而撑开DIV得到解决,此方法比较方便和实用。

2)、只使用overflow:hidden属性,如方法二

3)、图片使用上传时候软件处理下,以适应DIV布局宽度,如方法一

以上为推荐解决IMG图片撑破有限DIV宽度方法,根据实际情况大家可以任意选择适合自己解决网页中图片撑破DIV层方法。

时间: 2024-08-01 10:46:24

<转载>CSS解决图片过大撑破DIV的方法的相关文章

解决phpcms图片太大撑破表格图片自适应图片按比例缩小

css代码: img,a img{ border:0; margin:0; padding:0; max-width:590px; width:expression(this.width590?590px:this.width); max-height:590px; height:expression(this.height590?590px:this.height); } 上面的代码会出现2个问题! 1.会把图片变的非常 img,a img{ border:0;  margin:0;  pad

转载 | 防止页面图片过大出现横滚动条问题

- JS方法 - 就是一小段JS加到页面中就可以,下面把这段代码贴出来: 1 jQuery(document).ready(function () { 2 jQuery("body").attr("style","overflow-x:hidden"); 3 }); - CSS方法 - 一.防止图片撑破DIV方法一 原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,

在线修改图片尺寸缩放网站(完美解决图片过大无法上传问题)

在线修改图片尺寸缩放网站(完美解决图片过大无法上传问题) http://pic.sdodo.com/tool/picadjust/ http://www.zhengzong.cn/bbsxp/thread-8136-1-1.html 一次使用windows xp用头像是用到 因头像尺寸标准为48*48 Look! 成功修改的小猫咪! Windows Xp / 2003用户头像位置 C:\Documents and Settings\All Users\Application Data\Micro

防止表格被内容撑破的解决办法总结

默认情况下,设定了表格大小,看起来没什么问题,但当表格里装了很多比表格宽度要宽的内容时就会发现表格自然的被撑大了. 第一种情况是表格被英文单词撑破了.解决办法是在表格的属性里设置style="word-wrap:break-word;" 但其实还是有问题.当往表格里装一长串的英文字母时,表格还是会被撑破.这就是第2种情况了解决办法是在表格风格属性里再加一个属性.style="word-wrap:break-word;word-break:break-all;" 但还

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

网页图片自动缩小代码 防止图片撑破表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

图片--Android有效解决加载大图片时内存溢出的问题

Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或setImageResource或BitmapFactory.decodeResource来设置一张大图,因为这些函数在完成decode后,最终都是通过java层的createBitmap来完成的,需要消耗更多内存. 因此,改用先通过BitmapFactory.decodeStream方法,创建出一个bitmap,再将其设为ImageView

[转载]网站性能优化之CSS无图片技术 —— 网站性能优化

一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术:换句话的意思就是在使用纯CSS生成类似图片效果的技术.二.为什么要“无图片”?首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K.明显发现CSS文件比CSS Image小很多.当然单纯拿这两个来比,还不能说明什么.下面我们通过计算来说下CS

css限制图片大小,避免页面撑爆

/*==========限制图片大小======避免页面撑暴========*/img { max-width:100%;width:expression(width>669?"100%":width+"px");} --说明 .content img { max-width:100%;width:expression(width>(外层宽度px)?"100%":width+"px");} css限制图片大小,避免