使用CSS max-width和max-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片，然图片相对不变形清晰。
使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width >300 ? "300px" : this.width)或者height:expression(this.height>100?"100px":this.height)。
解决IE6支持max-height
div css解决IE6支持max-width
一般情况下只需要设置好宽度限制，比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用overflow:hidden隐藏溢出图片，同时为了兼容IE6我们设置个width:expression(this.width >300 ? "300px" : this.width)解决即可。
1、具体解决DIV+CSS实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片缩小不变形实例 www.divcss5.com</title>
<style>
.divcss5{ border:1px solid #000width:300pxheight:100pxoverflow:hidden}
.divcss5 img{max-width:300px_width:expression(this.width >300 ? "300px" : this.width)}
</style>
</head>
<body>
<div class="divcss5">
1、首先打开sublime_text软件，在其中新建一个html文件，然后写入最简单的网页格式代码：
2、然后新建一个高200px，宽200px，颜色为蓝色的div盒子：
3、接着在代码中加入background-image，然后引入一张图片，url里面的是图片的相对路径地址，相对的是html文件所在目录：
4、最后打开浏览器，就可以看到插入好的图片了：
1、打开在线写前端代码的网站如jsrun或者jsfiddle。
目2、标是做一个如图所示的效果，不同大小的图片。
3、每个方框的html 如下，
<div>
<span>
<img src='图片地址'>
</img>
</span>
</div>
4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。
其中
display: table-cell
text-align: center
vertical-align: middle
这3行决定居中效果。
其中
img {
max-width: 100%
max-height: 100%
}
的目的是让图片可以缩放而比例不变。
div {
float:left
margin:5px
padding:5px
border:1px solid #000
}
span {
font-size: 0
width: 150px
height: 150px
display: table-cell
text-align: center
vertical-align: middle
}
img {
max-width: 100%
max-height: 100%
}
5、效果如下，很好的实现居中。
6、上面是div为float的情况
div如果是absolute或fixed也可以正常表现。
只有一个div的情况下，代码如下
<div>
<span>
<img src='图片地址'>
</img>
</span>
</div>
div {
margin:5px
padding:5px
border:1px solid #000
position: absolute
left:100px
top:100px
}
span {
font-size: 0
width: 150px
height: 150px
display: table-cell
text-align: center
vertical-align: middle
}
img {
max-width: 100%
max-height: 100%
}
7、这张图片仍然是居中的，没有收到父容器的影响。
