<img src="" width="" height="" alt="">
一：图片的宽度和高度的关系？
1.宽度设置，高度会自行按原比例调整！
2.高度设置，不设置宽度，那么宽度也会按图片原比例调整哦。
3.强行同时设置图片的高和宽，会导致图片失真哦，图片的宽高比例变化了。 除非你设置比例一样。
4.height:auto,顾名思义就是相当于不设置height属性，height会根据宽高比例确定。
5.只设置width：100%，height自行调整。
6.只设置height：100%； 图片按默认大小显示。 因为div的高度不确定！
总结：宽度和高度，两者有一个确定，另一个会按照图片默认的宽高比例调整自己的另一属性。
二：现象
1.图片的内部样式会覆盖图片的内联样式哦， height width
2.图片的max-width之类的只是给图片设置一个阈值。 不是设置具体大小哦，所以不会覆盖其内联样式。
3.图片不设置高度和宽度，自然就会按照自己的默认大小显示。
三：响应式
1.设置图片的max-width：100%（相对于图片的默认宽度），height：auto（默认的哦）； 然后图片怎么缩放都会不大于自己的默认宽度。
从而不会失真！ 设置width：会使得图片失真哦！
max-width的参照物是图片本身的哦！ 和100% 的参照物不同（容器）。
2.实现的效果： 图片会随着容器大小的变化而发生变化。 图片的可缩可放：width：100%。
图片只缩不放：max-width：100%；
总结：响应式图片的思路就是宽高参照容器大小。
四：疑问？
1.设置内联的宽高，然后再设置外联的宽高？ 这是啥意思啊？ 内联的宽高：图片本身的大小。
2.设置图片容器的高度，然后图片继承（height：100%） 直接将高度写在img标签的区别是什么呢？ 没区别吧！
background-image
一：再次巩固一番
1.设置背景图，那么容器一定要有高度哦，不然肯定没法显示。
2.backgorund-size:contain 按照图片的默认大小来显示。
background-size:cover 100%填充容器。 图片的宽高比例也是不变的哦，显示不下的会被隐藏。
background-size:100% 效果和cover的一样哦（同上）
background-size:100% 100% 背景图完整覆盖容器，但宽高比例变了，图片变形。
background-posiiton: left/center/right top/center/bottom
二：背景图响应式
1.媒体查询，根据设置分辨率加载相应大小的图片哦。 节省带宽。