当前位置:首页 > 技术分析 > 正文内容

由于背景图片过大,页面撑出滚动条的解决办法

ruisui884个月前 (03-02)技术分析17

JS方法:
$("body").attr('style','overflow-y:hidden') //这个是解决竖状滚动条
//横向 需要把
overflow-y改成overflow-x即可
CSS办法:

一、防止图片撑破DIV方法一

原始处理方法是将要展示的图片进行处理。比如你的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结构:


对应CSS代码:.dc5 img{宽度值+单位}

五、CSS解决图片撑破撑开DIV方法五

使用max-width(最大宽度),比如你DIV宽度为500px,那你对应DIV样式再加入最大宽度CSS样式“max-width="500px"”即可解决,但是在IE6浏览器不兼容此属性,谨慎使用。

六、解决图片撑破DIV层方法总结与推荐

1)、最大宽度(max-width)+overflow:hidden。我们这样设置可以让IE6版本以上浏览器支持最大宽度样式,也让IE6下隐藏图片超出宽度而撑开DIV得到解决,此方法比较方便和实用。

2)、只使用overflow:hidden属性,如方法二

3)、图片使用上传时候软件处理下,以适应DIV布局宽度,如方法一

以上为推荐解决IMG图片撑破有限DIV宽度方法,根据实际情况大家可以任意选择适合自己解决网页中图片撑破DIV层方法。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2397.html

分享给朋友:

“由于背景图片过大,页面撑出滚动条的解决办法” 的相关文章

如何做好精细化管理,实现全流程高效落地,牢记这4点

本文选自头条号@业绩增长系统???????????该资料?共有完整版42页,对于学习之人非常具有参考价值,值得深度学习精细化的费用管理是提升企业费效的必经之路,精细化管理”顾名思义就是“精确、细致、深入、规范”的全面管理模式领取方式:1、?关注?+评论+转发此文?2、主页S信?:999免费?获得?这...

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了。动态路由设置一般有两种:(1)、简单的角色路由设置: 比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置: 比如OA系统、多种角色的权限...

在vue项目中封装WebSockets请求

在Vue项目中封装WebSocket请求包括以下步骤:1. 安装WebSocket库:首先,导入WebSocket库,例如`vue-native-websocket`或`socket.io-client`。根据项目需求选择适当的库,并根据官方文档进行安装和配置。2. 创建WebSocket服务:在V...

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

引言在现代Web开发中,实时数据交互变得越来越重要,而WebSocket作为HTML5标准的一部分,提供了一种全双工、长连接的通信方式,使得服务器与客户端可以进行双向实时通信。但在实际应用中,由于浏览器同源策略的限制,前端应用直接访问后端WebSocket服务可能会受到阻碍,尤其是在前后端部署不在同...

APICloud 多端开发教程 |《企业展示》源码深度解析

此项目为企业展示类应用,主要功能包括企业信息展示、案例展示、加盟申请等。项目源码在 https://github.com/apicloudcom/company-display仓库的 widget 目录下。项目中前端采用avm多端开发技术进行开发,要点包括TabLayout布局,滑动轮播图,富文本格...

博士后谈学术论文“参考文献”的5个重要作用

众所周知,我们在撰写学术论文的正文之Հ...