让大图片不超过网页宽度，让图片不撑破通过CSS样式设置的DIV宽度！

接下来，我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题，在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问题。

图片撑破布局原因
1、由于浏览器版本低（微软IE6）
2、没有设置div布局的宽度

解决图片超出宽度或撑破div css布局方法
1、在文章中发布图片的时候将图片编辑缩小
2、通过对对应div的css来设置显示的图片最宽宽度 推荐
3、通过css对图片设定宽度。

通过css来解决图片撑破div布局案例
通过css来控制代码如下(cmcss是对应父级类名)：
.cmcss {margin: auto;width: 600px;}
.cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}这种图片第一次加载时候图片不能显示

直接通过对对应的div内的内容图片宽度设置代码如下：
.cmcss img{ width:500px;} 宽度自定，但是不推荐此方法，因为设置后此div布局内的图片将全部宽度为500px，那样将造成图片小的，被放大显示模糊。

可以通过对图片设置最宽css可以使用max-width来设置，但是IE6不支持，但是可以使用浏览器的css hack来设置代码如下
.cmcss img{max-width:500px;_width:500px;}
说明：通过其他浏览器不支持带“_”的css，但是IE6支持。刚好可以通过此css hack来实现对图片宽度的现在。这里只能克服IE6显示固定的宽度来符合其它版本的兼容性。

扩展与提高
我们看区别不同浏览器CSS HACK的代码
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
你可能要问了，为什么不用“*”来代替“_”来区别IE6浏览器，这里值得注意的是ie6和IE7都会解释和识别“*”的，但是IE7对 important的识别具有优先全，所以IE7在CSS代码中有important将有优先识别并成为唯一性，所以在有important时候IE7和 IE6前面都可以用“*”号，但是无论带important在前或在后IE7将识别为唯一区别css hack。所以这里没有important的时候需要用另外IE6的css hack中“_”小写半角下划线。
案例如下（Blue hills.jpg图片为800像素宽的图片）
代码：

<!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-Type" content="text/html; charset=gb2312" />
<title>www.divcss5.com案例-图片不超过设置宽度</title>

<style type="text/css">
<!--

.cmcss img{ max-width:150px;_width:150px;}
-->
</style>
</head>

<body>
原始图片宽度为800PX，设置后如下图为150px
<div class="cmcss"><img src="Blue hills.jpg" /></div>
</body>
</html>

截图如下：


通过此方法对图片的宽度设置最大宽度为多少，css代码少方便，推荐此方法来解决图片撑破div css布局的宽度。

<转载>使用css让大图片不超过网页宽度的更多相关文章

  1. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  2. CSS从大图片上截取小图标的操作

    注:图片名称(tabicons.png)每个小图标width:18px;height:18px从左上角坐标为(-0px;-0px;); 例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为 ...

  3. CSS从大图片上截取小图标的操作（转）

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  4. CSS从大图片上截取小图标

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  5. CSS从大图片上截取小图标的操作以及三角形的画法

    #name{ background:url(images/name.png) no-repeat 2px 2px; background-position: -2px -70px;//其中这个是定位图 ...

  6. 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    转载  原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术   -    ...

  7. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  8. jQuery实现等比例缩放大图片

      在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们 ...

  9. Android相机使用(系统相机、自定义相机、大图片处理)

    本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显示出来,该例子也会涉及到Android加载大图片时候的处理(避免OOM),还有简要提一下有些人Surf ...

随机推荐

  1. BZOJ 2809: [Apio2012]dispatching( 平衡树 + 启发式合并 )

    枚举树上的每个结点做管理者, 贪心地取其子树中薪水较低的, 算出这个结点为管理者的满意度, 更新答案. 用平衡树+启发式合并, 时间复杂度为O(N log²N) ------------------- ...

  2. BZOJ 1458: 士兵占领( 网络流 )

    先判无解 把整个棋盘都放上士兵, 只需求最多可以拿走多少个士兵即可.每一行看做一个点r(i), 每一列看做一个点c(i) S->r(i), c(i)->T 连边, 容量为可以拿走的最大士兵 ...

  3. 一天一个类 --- StringTokenizer

    这是一个将字符串按照指定的delimiters(分隔符)进行分割的类. 首先看看他的构造函数: public StringTokenizer(String str, String delim, boo ...

  4. synapse socket总结一：服务器模型

    synapse (http://synapse.ararat.cz/doku.php)的源码简洁明了,属于轻量级的阻塞式socket通讯组件包,更多的功能需要自己基于它的基础上去封装实现.相对于ind ...

  5. csharp .net vb 复制图像

    .NET Compact Framework 不支持 Image.Clone 方法,可是仍能够复制图像和图像的某些部分.以下的演示例子演示怎样运行以下操作: 定义一个方法以创建位图. 定义一个重载方法 ...

  6. Google Map Android api V2 中使用MapView遇到CameraUpdateFactory is not initialized!的解决办法

    先说一下 Map V2 API Key 的问题吧: 在打包APP时需要自己生成一个XXX.keystore 用这个密室库生成的SHA1去申请的key 作为AndroidManifest.xml 中的K ...

  7. cygrunsrv: Error starting a service: QueryServiceStatus: Win32 error 1062: 解决办法

    问题原因:很可能是/var/log的权限设置不正确.首先执行 mkpasswd 和 mkgroup 重新生成权限信息,再删除sshd服务,重新配置 解决办法: $ mkpasswd -l > / ...

  8. GCD基本使用

    主要概念 队列 dispatch_queue_t,队列名称在调试时辅助,无论什么队列和任务,线程的创建和回收不需要程序员操作,有队列负责. 串行队列:队列中的任务只会顺序执行(类似跑步) dispat ...

  9. SecureCRT辅助解决方案

    SecureCRT辅助解决方案 1. 下载SecureCRT 7.3版本并激活: 2. SecureCRT linux配色方案: 3. SecureCRT设置log保存方案: 1. secureCRT ...

  10. U盘安装centos 7 提示 “Warning: /dev/root does not exist, could not boot” 解决办法

    1.查询磁盘 cd /dev ls 2.查询结果 sda 是我的硬盘对应的文件名(我机子只有一块硬盘),所以sda4就是U盘对应的文件名了,可以看到是sda4.至此我们重启一下,回到第一个图片所示的界 ...