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也是按原长宽比缩放背景图，会显示完整的图片