【CSS】响应式图片_html/css_WEB-ITnose

原图：（宽1680px,高1050px）

可是，我们平时做网站的时候当 中的图片大于可是窗口时，就会出现横的滚动条、图片被截断的情况，如下图所示：

这时候我们可以使用响应式技术来解决：

响应式图片就是当浏览器屏幕窗口大小改变时，图片会随着窗口大小的改变而改变，不会出现图片被截断或出现横滚动条。

HTML代码：

CSS代码：

img{		width: 100%;		   /*设定为百分比那就OK*/		max-width: 100%;    /*为了保证图片不被拉伸，可加上此CSS属性*/	} 

效果：

上面示例是插入img标签的情况，那么背景图片是怎么处理呢？

HTML代码：

     
    	
12111111111111111444444444444444444444444444445555555555555

      
查看更多关于【CSS】响应式图片_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did107748