img问题

让图片完全显示：

1、使用img标签，设置CSS样式 img{width: 100%;height:100%;} 弊端就是可能导致图片变形（补充：或只给img设置宽度，高度auto）
2、使用背景图片background:url(...) no-repeat center; background-size: contain;
background-size(:length|percentage|cover|contain;)属性说明：
① length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
e.g.background-size:100px 100px;//缺点：可能变形
② ercentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
e.g.background-size:100% auto;//缺点：可能变形
③ cover：若图片尺寸大于所属元素尺寸，则图片不进行缩放，正常显示，超出部分被隐藏。反之，则图片等比例放大（不会变形），直至完全覆盖所属元素区域，超出部分被隐藏。
优点：背景图片全部覆盖所属元素区域；缺点：超出部分会被隐藏。
④ contain：对背景图片进行等比例的放大/缩小处理，直至背景图片能够完完整整的展示出来。
优点：图片不会出现变形，且被完全展示出来；缺点：当所属元素的宽高比与背景图片的宽高比不同时，会出现背景留白。