CSS学习教程:CSS对网页图片img的控制

2024-07-11 09:02:05

字体：大中小

来源：转载

供稿：网友

武林网(www.vevb.com)文章简介：CSS学习教程:CSS对网页图片img的控制.

这里为大家介绍的是DIV CSS对img图片控制。
我们常常会遇到以下情况：
1、img图片多了边框，特别是链接后的图片带边框
2、图片超出撑破DIV

下面我们通过CSS来解决这2个问题。
1、img图片多了边框，特别是链接后的图片带边框

根据以上图，我们对图片加链接，结果图片出现了边框，

解决方法：

我们只需在初始化IMG标签CSS即可

img{ padding:0; border:0;} 加入此CSS即可消除边框

2、图片超出撑破DIV
我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。
解决办法
使用CSS控制改对象IMG标签宽度即可，假如该对象为.yangshi设置宽度为500px，那我们就只需设置.yangshi img{max-width:500px;}但是在IE6中max-width是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度，让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站都是这样解决，一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打开网页。

总结：
1、一个网页中难免有图片，这时我们需要初始化img标签即：img{ padding:0; border:0;}
2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度小，同时还可以对该对象加入overflow:hidden属性，即隐藏超出内容包括图片。

使用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" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>案例-图片不超过设置宽度</title>

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

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

上一篇：CSS学习教程:display属性使用详细讲解

下一篇：CSS学习教程:CSS代码优化和CSS重用优化