原因是这样的
这几天在做公司网页 想做一个霸气的地图 就想到了百度api 
然后去网站找到了代码 可惜最大宽度只能到567px 
不过这对于代码达人来说根本就不是个事儿 像我这样的新手也知道去改源代码
所以把width改成了100%
然后首图的代码是这样的
.top { height:100vh; width:100%; background:url(../images/background-1.jpg) no-repeat center top; background-size:cover;}
...
我觉得没啥问题啊 
然后就在浏览器里测试
浏览器里是这样的
还不错吧
然后浏览器宽度拉小也是这样的
还没写320px的自适应代码 所以很乱啊 不过这不是重点
但是到了手机浏览器了就成了这样！！！(我用的ios7)
我真是晕掉了 这张图完美的撑破了这个div 都溢出了好几个页面
这还怎么给人好的体验啊
删掉百度api的js代码 这个问题就会消失
所以肯定和百度这段代码有关
但是以我的实力嘛
我怎么都找不出来。。。。哭了
各位帮忙看一下吧
奉上服务器地址 因为还没解析域名 所以。。。
各位将就看吧 http://121.40.157.215
知道问题在哪的大神可以直接好心的告诉我
不知道问题在哪的大神 可以出方法 我去测试
不过我真的是小白 js不太会写 html+css还马马虎虎
所以检查js代码的部分 我真搞不来
谢谢
回复讨论(解决方案) 一、防止图片撑破div方法一   -   top
原始处理方法是将要展示的图片进行处理。比如你的div宽度为500px（像素），那你上传的图片或放入网页的图片宽度就要小于500px，也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开div问题。
常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下，进行图片编辑处理的。
二、防止图片撑开div方法二   -   top
如果不处理照片方法适应div有限宽度，那可以对div设置隐藏超出内容方法。只需要对div设置宽度后加入css样式“overflow:hidden”即可解决隐藏图片比div过宽部分解决撑破div问题。
三、解决方法三   -   top
对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片，不会影响图片画面质量。
比如你的网页div宽度为500px，那你上传图片后对img标签设置width等于500以下即可。
即可解决图片过宽导致div span撑破，这样好处可以等比例放大缩小图片。
四、css解决撑破方法四   -   top
这种方法使用css直接对div内的img进行宽度设置，这样不好是如果图片过小会影响网页浏览图片时候效果。
div结构：
对应css代码：.divcss5 img{width:宽度值+单位}
五、css解决图片撑破撑开div方法五   -   top
使用max-width（最大宽度），比如你div宽度为500px，那你对应div样式再加入最大宽度css样式“max-width=500px”即可解决，但是在ie6浏览器不兼容此属性，
六、解决图片撑破div层方法总结与推荐   -   top
1）、最大宽度（max-width）+overflow:hidden。我们这样设置可以让ie6版本以上浏览器支持最大宽度样式，也让ie6下隐藏图片超出宽度而撑开div得到解决，此方法比较方便和实用。
2)、只使用overflow:hidden属性，如方法二
3）、图片使用上传时候软件处理下，以适应div布局宽度，如方法一
以上为推荐解决img图片撑破有限div宽度方法，根据实际情况大家可以任意选择适合自己解决网页中图片撑破div层方法。
一、防止图片撑破div方法一   -   top
我尝试了overflow:hidden没有效果
我对这个div设置的属性是 
width:100% 
height:100vh 
background中的值是 cover
在pc浏览器中不会撑破