css图片过大怎么办白屏

html-css035

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进行宽度设置,这样不好是如果图片过小会影响网页浏览图片时候效果。

用一个div作为主框架,嵌套图片和文字内容两个div,同时使用浮动功能。

图片向左浮动,文字内容向右浮动,这就形成了两栏。

右边的文字内容又分为两个div,不需要浮动,它会自动上下排列的。

代码如下:

<div id="container">

<div id="photo"><img src="图片地址" /></div>

<div id="content">

<div id="text">文字介绍</div>

<div id="news">新闻内容</div>

</div>

</div>

CSS:

#container {width: 100%}

#photo {float: leftwidth: 40%}

#content {float: rightwidth: 60%}。

可以通过设置宽度来实现隐藏多余的图片,但是不建议这样做。

1、开发网站过程中需要使用的图片都是美工提前处理,遇到不合适的需要使用Photoshop进行裁剪操作,不适合使用代码来处理图片。

2、过大或者不合适的图片容易造成浏览器的兼容问题或者维护不便,另外也影响占用带宽。