1、图片填充DIV容器大小
让图片自动适应DIV容器大小: 这一现象很常见，其实，只须将DIV的大小设置成为固定的大小。设定img 的宽度为：100%；高度为：100%；即可让图片自动适应DIV容器的大小。此时需要注意图片如果原像素低于容器大小当图片拉伸后可能会导致图片模糊。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.girl{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="girl">
<img width=100% height=100% src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>
2.响应式图片
假如一张图片需要在PC端和手机端公用，此时就需要设置一个响应时的class属性。img-responsive。此样式是Bootstrap下的，它可以让图片自动根据页面窗口的大小压缩或放大图片。而不是当一个大图在窗口缩小时，会隐藏掉缩小的那一部分。
<img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" class="img-responsive"/>