css图片过大怎么办白屏

html-css016

css图片过大怎么办白屏,第1张

原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。

常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下,进行图片编辑处理的。

二、防止图片撑开DIV方法二

如果不处理照片方法适应DIV有限宽度,那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。

三、解决方法三

对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片,不会影响图片画面质量。

比如你的网页DIV宽度为500px,那你上传图片后对img标签设置width等于500以下即可。

即可解决图片过宽导致DIV SPAN撑破,这样好处可以等比例放大缩小图片。

四、CSS解决撑破方法四

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

很多无线端都使用前端模板进行数据渲染,在糟糕的网速情况下,一进去页面,看到的不是白屏就是 loading,这就是白屏问题。

此问题发生的原因基本可以归结为网速、静态资源。

1、css文件加载需要一些时间,在加载的过程中页面是空白的。

2、首屏无实际的数据内容,等待异步加载数据再渲染页面导致白屏。

3、首屏内联js的执行会阻塞页面的渲染。

还有一些其他的解决办法:

根本原因是客户端渲染的无力,因此最简单的方法是在服务器端,使用模板引擎渲染所有页面。同时

先从网络方面检测,再从js和css方面检测。

从网络方面检测:先确保网络连接顺畅、再检查 URL 地址是否错误、打开 控制台 查看是否有报错信息、查看接口访问 是否有请求、查看路由是否有path错误,导致加载了不存在的页面。

从js和css方面检测:排除了网络问题以后,如果还是白屏,那一般都是css和js加载造成的;css和js会造成阻塞渲染。比如不正确的引入css和js,就会导致它们的加载速度过长,从而导致白屏现象。

正确的引入方式是:在 标签中引入css,因为在加载HTML前不先渲染css的话,整个页面会乱掉;在 标签之前、body 标签中html 内容的后面,引入js,因为浏览器加载script标签时,处理内部代码的顺序都是从上到下依次执行的,如果在html内容前就引入js的话,那么就会导致,在所有的代码处理完毕之前,会阻塞其他资源的加载;会导致页面的其他内容都无法显示,因此如果不规范引入js的话,会对页面的其他内容带来影响。