1、新建一个html页面，并在页面中写上一个div。并为div添加背景图片，为背景图片添加一些基本的样式。
2、按下键盘上的F12，查看其在浏览器中的效果。
3、利用css中的伪元素::after或者::before。
4、利用伪元素是将指定标签的前面或者后面的内容设为空，并设成块元素，并设定以百分比为单位的padding-bottom或者padding-top。以此撑开这个div。
5、在有背景图片的div的内部再套一个div，然后为这个内部的div添加相应的样式，使得外层div可以被撑起来。
6、为这个内部div设定内部边距上或者下都可以。同样是以百分比作为单位。这样再次在浏览器中查看，就可以看到作为背景的图片了。
这个是可以的。只要设置对应图片的width和htight的具体数值就可以了。举例一个：
img{width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：
width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
height:auto;图片的高度自己适应(图片有多高就显示多高)
width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
max-width:100%;图片的宽度不能超过图片所在的空间的宽度
max-height:100%;图片的高度不能超过图片所在的空间的高度
max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。
这2个中，优先对max-width进行缩放，当图片在max-width缩放后的尺寸仍然超出容器大小时。max-height就发挥了作用：对图片再次进行缩放！举例：
<div style="width:50px;height:40px"><img src="a.jpg">
<!--这里我们假如图片的实际尺寸是320X320-->
</div>
根据上面4个css可以知道：
图片被缩放后在div的尺寸是：
width:50px;（因为图片的width:100%）
height:50px（这里height是有width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%;就会发挥作用，
在max-height:100%;的作用下，图片被缩放后在div的尺寸是：
width:40px;
height:40px;
这个尺寸符合max-height和max-width
所以，当div在不断变化时，图片在div中也会跟着布断发生变化，
这里不介意给图片设置width:100%;height:100%；会造成图片变形
完整例子：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width: auto;
height:auto;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<div id="div" style="width: 50px;height: 50px;">
<img src="../5100036_080649087294_2.jpg" />
</div>
<script>
window.onload=function(){
setInterval(function(){move();},1000);
}
function move(){
var _width=document.getElementById('div').style.width.replace('px','');
if(parseInt(_width)>400){
document.getElementById('div').style.width=parseInt(_width)-5+'px';
document.getElementById('div').style.height=parseInt(_width)-5+'px';
}else{
document.getElementById('div').style.width=parseInt(_width)+5+'px';
document.getElementById('div').style.height=parseInt(_width)+5+'px';
}
}
</script>
</body>
</html>
*{margin:0;padding:0;border:none;}
.div1{width:100px;height:100px;}
</style>
<div class="div1">
<img src="http://news.baidu.com/z/resource/r/image/2013-11-22/8f375dc15dcd832f16ec4e182aac50ed.jpg" width="100%" height="100%" />
</div>本回答被网友采纳
