img大小和background-size

img

不设置img标签的width和height，将显示图片真实大小
只设置width或height，另外一个将按比例自动缩放
设置了width和height，将按设置的大小来显示

img图片自适应（bootstrap响应式图像的写法）
img{
display:block;
max-width:100%;
height:auto;
}
把元素的 display 属性设置为 block，以块级元素显示，由于img是行内元素设置不了width和height
设置 height:auto，相关元素的高度取决于浏览器
auto是默认的值，通常无需设置此值，不设置即宽度默认为auto（自适应 自动），随内容增长而增宽，随浏览器宽度而换行，
通常状况下，若是是自动宽度是没有必要设置的，直接去掉简单而又节约代码，同时和设置值为auto同样效果
width设置的是内容块级元素内容的宽度，假设父级元素是body则width:100%后块级元素就和父级元素同样宽（固然还要考虑默认的margin），设置margin-left后会出现横向滚动条，不设置width或者width:auto，则不会有滚动条

设置 max-width 为 100% 会重写任何经过 width 属性指定的宽度
百分比是以父元素为标准的，因此首先其父元素要有宽高，宽度通常不设置会有默认值(auto)，可是高度不设置就没有默认值，所以若是父元素没设高度值，而其内部元素用了百分比做为高度时，是没有效果的

若是设置了div的宽高，而里面的img不设置，若img过大，会超出div

里面img设置width:100%，则img宽度和div同样，但img特性是自动等比缩放

解决办法是父div不设置高度，让img将其撑起

margin的百分比也是以父元素为基准的

有时使用margin-left时会出现图片变小的状况，由于灰框div不设置宽高，就会和黑框div的width同样宽，img又设置了width:100%，当灰框div的margin-left愈来愈大时，它本身就愈来愈小，而img用了百分比，就随着灰框这个父div一块儿变小

background-size

background-size: length（px）|percentage（%）|cover|contain;
cover会按原长宽比缩放背景图来铺满整个元素，超出的会被裁掉

contain也是按原长宽比缩放背景图，会显示完整的图片