html如何使图片适应当前浏览器可见分辨率

让图片适应当前浏览器而且居中，一般使用CSS的背景图来做，示例代码如下：

<style>

div{background:url(图片地址) center top no-repeatheight:100px}

</style>

<div>这里是内容</div>

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color        规定要使用的背景颜色。

background-position   规定背景图像的位置。

background-size           规定背景图片的尺寸。

background-repeat      规定如何重复背景图像。

background-origin

background-clip

background-attachment

background-image     规定要使用的背景图像。

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif')也是允许的。

图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。

如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 <宽度 <= 768，加载120px的图片， 宽度>768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。

这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。

响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。

感觉上放大或者缩小是你心里的作用，这个和布局一样，就跟你在家用个22寸的显示器和你去商场看个22寸的显示器一样，大小没有变，但是周围的环境大了所以你会感觉大小变了

至于老溢出的话有两种解决办法：

你可以设置图片的宽度为100%，这样图片就可以根据你的屏幕大小改变宽度了

你可以设置包在图片外部的div为100%，然后设置overflow:hidden；的属性，这样图片大了之后就会溢出隐藏，不会搞乱你的布局了

---