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层方法。

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

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

    img,a img{ border:0; margin:0; padding:0; max-width:590px; width:expression(this.width590?590px:this ...

  2. td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效,英文 数字 不换行 撑破div容器

    我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...

  3. 一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)

    一.先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.例如: //html <bod ...

  4. 英文 数字 不换行 撑破div容器

    我们在div等容器 中,如果规定了宽度,并且里面的内容不是全英文或者全数字是OK的,会自动换行,但是如果是全数字或者是全英文,则会撑破容器,如图     解决方法 word-wrap:break-wo ...

  5. css解决图片拉伸问题

    在实际场景中,我们经常会遇到图片大小固定的需求,但是由于原始图片大小,比例不一样,不同图片以相同的大小展示会参差不齐.解决方法就是object-fit或者background-size属性.他们的区别 ...

  6. css 解决图片下小空隙问题

    http://baijiahao.baidu.com/s?id=1581004863053583633&wfr=spider&for=pc 这篇讲的挺清楚,也有解决办法

  7. CSS解决图片缩小不变形

    我会在图片上加: <img style="max-width:80px;max-height:80px;"> 限制其最大宽度和高度

  8. 图片过大,在div中不压缩的居中方法

    在图片全屏轮播时,为了兼容更大的屏幕,我们常常把图片设置为很大,但是在显示的过程中,如果让图片随浏览器自动变化的话,常常会把图片压缩变形,影响显示,在不压缩图片的情况下,如何只显示图片的中间部分呢? ...

  9. html/css解决inline-block内联元素间隙的多种方法总汇

    序 display有几种属性:inline是内联对象,比如<a/> . <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置:block是块对象,比如<d ...

随机推荐

  1. [Swust OJ 191]--迷宫逃离(打表搜索)

      题目链接:http://acm.swust.edu.cn/problem/191/ Time limit(ms): 1000 Memory limit(kb): 65535   江鸟突然想到了一个 ...

  2. u-boot分析——struct gd_t与struct bd_t

    gd_t和bd_t是u-boot中两个重要的数据结构,在初始化操作很多都要靠这两个数据结构来保存或传递.分别定义在./include/asm/global_data.h和./include/asm/u ...

  3. Pathchirp—有效的带宽估计方法(二)

    上一个blog介绍了有效带宽估计方法:pathload.http://blog.csdn.net/ice110956/article/details/11126491. 做一个小小的总结:pathlo ...

  4. (step8.2.2)hdu 2509(Be the Winner——简单博弈)

    题目大意:输入一个整数n,表示火柴堆数(原题其实指的是苹果堆数,但是为了尽量与模板保持一致,所以在这里理解为火柴堆数....其实理解为什么都没关系, 重要的是,理解就行....).在接下来的一行中,有 ...

  5. Android大放送干:书籍、过程、工具等各种全

    完全干燥分享,本文收集Android制定必要的书籍.过程.具.新闻和杂志各种资源.它们能让你在Android开发之旅的各个阶段都受益. 入门 <Learning Android(中文版)> ...

  6. Eclipse中JBOSS5.1无法启动的问题解决办法

    今天在Eclipse中启动JBoss 5.1时遇到这样的一个错误: …… ERROR [AbstractKernelController] Error installing to Instantiat ...

  7. .net嵌入c#代码(投票练习)

    .net嵌入c#代码(投票练习) <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...

  8. Eclipse生成Jar包方法

    Eclipse生成jar包   第一:普通类导出jar包,我说的普通类就是指此类包含main方法,并且没有用到别的jar包. 1.在eclipse中选择你要导出的类或者package,右击,选择Exp ...

  9. Windows Azure 网站 (WAWS) 和中间证书

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Erez Benari 撰写. 在 Windows Azure 网站上使用 SSL 已经司空见惯.虽然向网站上传和分配证书通常简 ...

  10. ArrayList内元素按照字典排序

    package day08; import java.util.ArrayList; import java.util.Collections; import java.util.Iterator; ...