使用了百度地图API后 首页大图在手机浏览器里会撑破div的情况_html/css_WEB-ITnose
原因是这样的
这几天在做公司网页 想做一个霸气的地图 就想到了百度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以下即可。
即可解决图片过宽导致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浏览器中不会撑破

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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

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

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