<转载>使用css让大图片不超过网页宽度

让大图片不超过网页宽度,让图片不撑破通过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布局的宽度。

时间: 2024-12-28 02:34:10

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

CSS从大图片上截取小图标的操作_CSS精灵

1.编程思想在于:          使用background-position属性(设置背景图像的起始位置).这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始. 2.CSS基础介绍: 1.如何定位背景图像: body { background-image:url('bgimage.gif'); background-repeat:no-repeat; background-attachment:fixed; background-p

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

我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量. 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐.还有一种是在外部容器定义over-flow:hidden.但这种办法只会切割图片而不会自动适用. 下面的办法的出现应该感谢伟大的c

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

注:图片名称(tabicons.png)每个小图标width:18px;height:18px从左上角坐标为(-0px;-0px;); 例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素 截取小图标样式 .icon { background: url(imges/tabicons.png) no-repeat; width: 18px; line-height: 18px; display: inline-block; } .icon-

CSS从大图片上截取小图标

一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-height:18px; display:inline-block;} .tu0101{background-position:-0px -0px;} .tu0201{background-position:-20px -0px;} .tu0301{background-position:-40px

CSS从大图片上截取小图标的操作(转)

一张图片,用CSS分割成多个小图标. css样式: [css] view plaincopy .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-height:18px; display:inline-block;} .tu0101{background-position:-0px -0px;} .tu0201{background-position:-20px -0px;} .tu0301{backg

iOS-UIWebView加载HTMLString图片显示超过屏幕宽度,导致webView可以左右滑动处的理方法

修改webview图片适配的代码,是使用js去修改图片适配屏幕宽度: // 网络请求加载的数据,进行字典转模型 NSDictionary *dict = [result objectForKey:@"data"]; HQNewsDetailModel *model = [HQNewsDetailModel mj_objectWithKeyValues:dict]; /** * model.details就是后台返回的HTMLString * " $img[p].style.w

大图片根据分辨率自适应宽度

问题:一个1920*900的大图,在1024*768的分辨率只能显示一部分,希望仍居中显示 解决方案CSS: width: 100%; background-position: 50% 50%; 示例code: <style> body { background-repeat: no-repeat; width: 100%; background-position-x: 50%; background-position-y: 118px; background-image:url(@Url.I

大图片依据分辨率自适应宽度

问题:一个1920*900的大图,在1024*768的分辨率仅仅能显示一部分.希望仍居中显示 解决方式CSS: width: 100%; background-position: 50% 50%; 演示样例code: <style> body { background-repeat: no-repeat; width: 100%; background-position-x: 50%; background-position-y: 118px; background-image:url(@Ur

Css调整图片大小[将大图片压缩成小图片]

<div style="width:设置宽px; height:设置高px; background-image: url('图片路径'); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径',sizingMethod='scale'); float:left;background-size:设置宽px 设置高px;"> </div> 采用滤镜[filter]效果,实现大图片压缩