目录
回复讨论(解决方案)
首页 web前端 html教程 使用了百度地图API后 首页大图在手机浏览器里会撑破div的情况_html/css_WEB-ITnose

使用了百度地图API后 首页大图在手机浏览器里会撑破div的情况_html/css_WEB-ITnose

Jun 24, 2016 am 11:58 AM
api div 情况 首页

原因是这样的
这几天在做公司网页 想做一个霸气的地图 就想到了百度API 
然后去网站找到了代码 可惜最大宽度只能到567px 
不过这对于代码达人来说根本就不是个事儿 像我这样的新手也知道去改源代码
所以把width改成了100%

然后首图的代码是这样的

.top {	height:100vh;	width:100%;	background:url(../images/background-1.jpg) no-repeat center top;	background-size:cover;}
登录后复制

<section class="top">...</section>
登录后复制


我觉得没啥问题啊 
然后就在浏览器里测试
浏览器里是这样的

还不错吧

然后浏览器宽度拉小也是这样的
还没写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以下即可。
使用了百度地图API后 首页大图在手机浏览器里会撑破div的情况_html/css_WEB-ITnose即可解决图片过宽导致DIV SPAN撑破,这样好处可以等比例放大缩小图片。
四、CSS解决撑破方法四   -   TOP

这种方法使用CSS直接对div内的img进行宽度设置,这样不好是如果图片过小会影响网页浏览图片时候效果。

Div结构:

使用了百度地图API后 首页大图在手机浏览器里会撑破div的情况_html/css_WEB-ITnose
对应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浏览器中不会撑破 
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何设置谷歌浏览器首页 如何设置谷歌浏览器首页 Mar 02, 2024 pm 04:04 PM

如何设置谷歌浏览器首页?谷歌浏览器是如今最受欢迎的一款网络浏览器软件,这款浏览器拥有简洁高效的特性,神兽用户喜欢,在使用浏览器的时候,不同的人有不同的设置喜好,有人喜欢将谷歌浏览器设置成默认首页,也有人喜欢将首页设置成其他搜索引擎,那么具体要在哪里设置呢。接下来小编就给大家带来快速设置谷歌浏览器首页方法,希望能够给大家带来帮助。快速设置谷歌浏览器首页方法1、打开谷歌浏览器(如图所示)。2、点击界面右上角的菜单键(如图所示)。3、选择“设置”选项(如图所示)。4、在设置菜单中,找到“搜索引擎”(如

如何在PHP项目中通过调用API接口来实现数据的爬取和处理? 如何在PHP项目中通过调用API接口来实现数据的爬取和处理? Sep 05, 2023 am 08:41 AM

如何在PHP项目中通过调用API接口来实现数据的爬取和处理?一、介绍在PHP项目中,我们经常需要爬取其他网站的数据,并对这些数据进行处理。而许多网站提供了API接口,我们可以通过调用这些接口来获取数据。本文将介绍如何使用PHP来调用API接口,实现数据的爬取和处理。二、获取API接口的URL和参数在开始之前,我们需要先获取目标API接口的URL以及所需的

React API调用指南:如何与后端API进行交互和数据传输 React API调用指南:如何与后端API进行交互和数据传输 Sep 26, 2023 am 10:19 AM

ReactAPI调用指南:如何与后端API进行交互和数据传输概述:在现代的Web开发中,与后端API进行交互和数据传输是一个常见的需求。React作为一个流行的前端框架,提供了一些强大的工具和功能来简化这一过程。本文将介绍如何使用React来调用后端API,包括基本的GET和POST请求,并提供具体的代码示例。安装所需的依赖:首先,确保在项目中安装了Axi

Oracle API使用指南:探索数据接口技术 Oracle API使用指南:探索数据接口技术 Mar 07, 2024 am 11:12 AM

Oracle是一家全球知名的数据库管理系统提供商,其API(ApplicationProgrammingInterface,应用程序接口)是一种强大的工具,可帮助开发人员轻松地与Oracle数据库进行交互和集成。在本文中,我们将深入探讨OracleAPI的使用指南,向读者展示如何在开发过程中利用数据接口技术,同时提供具体的代码示例。1.Oracle

Oracle API集成策略解析:实现系统间无缝通信 Oracle API集成策略解析:实现系统间无缝通信 Mar 07, 2024 pm 10:09 PM

OracleAPI集成策略解析:实现系统间无缝通信,需要具体代码示例在当今数字化时代,企业内部系统之间需要相互通信和数据共享,而OracleAPI就是帮助实现系统间无缝通信的重要工具之一。本文将从OracleAPI的基本概念和原理入手,探讨API集成的策略,最终给出具体的代码示例帮助读者更好地理解和应用OracleAPI。一、OracleAPI基本

使用Python将API数据保存为CSV格式 使用Python将API数据保存为CSV格式 Aug 31, 2023 pm 09:09 PM

在数据驱动的应用程序和分析领域,API(应用程序编程接口)在从各种来源检索数据方面发挥着至关重要的作用。使用API数据时,通常需要以易于访问和操作的格式存储数据。其中一种格式是CSV(逗号分隔值),它允许有效地组织和存储表格数据。本文将探讨使用强大的编程语言Python将API数据保存为CSV格式的过程。通过遵循本指南中概述的步骤,我们将学习如何从API检索数据、提取相关信息并将其存储在CSV文件中以供进一步分析和处理。让我们深入了解使用Python进行API数据处理的世界,并释放CSV格式的潜

如何处理Laravel API报错问题 如何处理Laravel API报错问题 Mar 06, 2024 pm 05:18 PM

标题:如何处理LaravelAPI报错问题,需要具体代码示例在进行Laravel开发时,经常会遇到API报错的情况。这些报错可能来自于程序代码逻辑错误、数据库查询问题或是外部API请求失败等多种原因。如何处理这些报错是一个关键的问题,本文将通过具体的代码示例来演示如何有效处理LaravelAPI报错问题。1.错误处理在Laravel

谷歌浏览器首页变360了怎么办?谷歌浏览器首页恢复 谷歌浏览器首页变360了怎么办?谷歌浏览器首页恢复 Mar 15, 2024 am 08:16 AM

谷歌浏览器首页变360了怎么办?谷歌浏览器是一款简洁便利的浏览器,不过很多小伙伴在使用的过程中却发现简洁的首页被替换成了360首页,想要将它恢复为原来的样式,那么应该怎么设置呢?下面就由小编为大家带来谷歌浏览器首页恢复的方法。  解决方法  1、首先打开谷歌浏览器。  2、想要改成默认,那就点击右上角的三个点。  3、点击【设置】打开设置页面。  4、点击【启动时】。  5、如图所示,这里【打开特定网页或一组网页】是360导航的网址。  6、点击360导航右侧的三个点。  7、点击【移除】。  

See all articles