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

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

ruisui882个月前 (03-02)技术分析12

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

分享给朋友:

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

费用管理解决企业财务难题

目前来讲,国内大多数企业费用预算管理都是由财务部门“一手包办”,与之相适应的是费用管理的信息化手段是通过财务管理软件来实现,仅仅局限于财务预算管理层面,从而使预算管理处于“预而不算”的状态,表现为信息滞后、执行者在执行预算过程中处于被动地位、可控性差、考核难以奏效。而且由于对各部门预算缺乏约束力,员...

Linux世界的多样性:yum和apt的对比,让你感受不同发行版的特色

yum和apt是两种常用的Linux软件包管理器,它们都可以用来安装、更新和删除软件包。但是,它们之间也有一些重要的区别,本文将对它们进行分析对比。yum是Yellowdog Updater Modified的缩写,它是基于RPM(Red Hat Package Manager)的软件包管理器,主要...

vue组件间的九种通信方式

前言Vue组件实例间的作用域是相互独立的,而通常一个页面是由很多个组件构成,这些组件可能又嵌套了组件,形成了一个关系网图,它们的关系可能是像下图中一样,大致分为两种使用场景,父子组件间通信和非父子组件间通信,父子组件间通信又分为直接父子关系和间接父子关系。vue提供了多种通信方法,针对不同的通信需求...

「2022」打算跳槽涨薪,必问面试题及答案——VUE篇

1、为什么选择VUE,解决了什么问题?vue.js 正如官网所说的,是一套构建用户界面的渐进式框架。与其它重量级框架不同的是,vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另外一方面,当与现代化工具链以及各种支持类库结合使用时,vu...

10个实例小练习,快速入门熟练 Vue3 核心新特性(一)

作者:xuying 全栈修炼转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ前言Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。本篇文章总共分两部分,望小伙伴们认真阅读。下一篇:10...

国产操作系统上Vim的详解03--安装和使用插件 | 统信 | 麒麟 | 中科方德

原文链接:国产操作系统上Vim的详解03--使用Vundle插件管理器来安装和使用插件 | 统信 | 麒麟 | 中科方德Hello,大家好啊!今天给大家带来一篇在国产操作系统上使用Vundle插件管理器来安装和使用Vim插件的详解文章。Vundle是Vim的一款强大的插件管理器,可以帮助我们轻松地安...