在设计网页的时候，经常会遇到图片处理问题，当把图片设置成跟父级一样宽、高参数之后，你会发现图片会不同程度的拉伸变形，除非图片的尺寸刚好和父级一样，但是怎么可能全部一样呢？所以下面的方法就是解决这个问题的，图片自适应父级，根据父级自动调整图片进行缩放，缩放之后水平、或者垂子居中显示，个人业余写的，不专业，但是貌似效果还可以：
设置Style样式：设置父级宽、高，超出之后隐藏
<style type="text/css">
.aaa{color: #CC3739; width: 200px; height: 145px; overflow: hidden;}
</style>Html代码如下：
<body> <p class="aaa"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> </p> </body>
Javascript代码如下：
function SetWidthAndHeight(PLWidth, PLHeight, imgID){
//遍历每一个“imgID”
$(imgID).each(function(){
/* 图片父级宽、高；也就是图片缩放之后参考数 */
var w1 = PLWidth;
var h1 = PLHeight;
/* 获取图片的实际宽、高 */
var w2 = $(this).width();
var h2 = $(this).height();
/* 根据比较父级与图片的宽、高比例，确定按照宽或者高进行缩放 */
if((w1/h1) < (w2/h2))
{
/* 按照父级高度缩放 及 图片高度等于父级高度 */
/* 得到图片缩放之后的新宽度 */
var neww2 = w2 - (((h2 - h1) / h2) * w2);
/* 得到图片需要向左位移的距离 */
var marginPX = -(neww2 - w1) / 2 + 'px';
$(this).css({"margin-left":marginPX, "height":h1});
}
else
{
/* 按照父级宽度缩放 */
/* 得到图片缩放之后的新高度 */
var newh2 = h2 - (((w2 - w1) / w2) * h2);
/* 得到图片需要向上位移的距离 */
var marginPX = -(newh2 - h1) / 2 + 'px';
$(this).css({"margin-top":marginPX, "width":w1});
}
})
}调用代码：
<script type="text/javascript" language="javascript"> /* 参数1：父级宽度；参数2：父级高度；参数3：需要缩放的图片定位 */ SetWidthAndHeight(200, 145, ".aaa img") </script>
