css怎么设置图片不超过网页宽度

发布时间：2022-03-03 17:53:44 作者：iii
来源：亿速云阅读：223

今天小编给大家分享一下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;*bac公斤round: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>css5.com.cn案例-图片不超越设置宽度</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怎么设置图片不超过网页宽度”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。

css怎么设置图片不超过网页宽度

相关阅读