背景图片太大时,而又不出现竖向滚动条的做法

当设计图做为背景图片太大时,必会出现滚动条,但是项目那边不希望出现滚动条,是一屏显示的,那就可以这样设计Css

<img src="images/bg.png" alt="bg">

img{ display:block; width:100%; height:100%;}

这样就可以让图片在页面中平铺,而不产生滚动条,但是有一个问题,当显示器的尺寸很小或13寸显示器的时候,图片会严重变形,但是这是目前来说最好的解决方案了。又不出现滚动条。做适配时也可以这样,只不过在320时让大尺寸的图片隐藏,小尺寸的显示就可以,同理,在大屏幕时,让320的隐藏。

时间: 2024-08-01 02:15:31

背景图片太大时,而又不出现竖向滚动条的做法的相关文章

使用Jcrop.js剪切图片因图片太大导致精准度丢失的解决办法

一.我在写一个头像上传剪切的demo时遇到了这个问题,正常大小的图片通过maxwidth设置后不会有问题,但是当上传图片太大时,由于被缩放导致Jcrop剪切时获取的不是实际剪切位置,因此需要按比例计算所剪切的图片大小 html代码 1 <%@ page language="java" contentType="text/html; charset=utf-8"%> 2 <%@ taglib prefix="s" uri=&quo

图片太大怎么在线压缩变小

图片太大怎么在线压缩变小,在上传图片至一些博客,自媒体,论坛等页面时,经常会因为图片太大而导致上传失败,那有没有什么好的方法去解决呢,答案自然是有的,接下来就跟着小编一起将图片压缩变小把. 第一.打开电脑,进入电脑上的浏览器,点开迅捷在线压缩网站. 第二.点入在线压缩的界面后,会看到有三个选项,分别是在线PDF压缩.在线图片压缩.在线视频压缩.我们点击在线图片压缩. 第三.进入在线图片压缩后,点击添加图片在弹出的文件框内加入提前准备好的图片或直接拖曳图片文件至网页里. 第四.添加完需要压缩的图片

图片太大怎么压缩小?

现在很多网站限制了上传图片的大小,还有一些网站上的头像需要的都是指定的尺寸了,那么问题来了图片太大怎么让其压缩变小呢,下面让我们来看看,是如何处理这一问题的吧.操作工具:[迅捷在线压缩]第一.打开电脑,进入电脑上的浏览器,点开迅捷在线压缩网站.第二.点入在线压缩的界面后,会看到有三个选项,分别是在线PDF压缩.在线图片压缩.在线视频压缩.我们点击在线图片压缩. 第三.进入在线图片压缩后,点击添加图片在弹出的文件框内加入提前准备好的图片或直接拖曳图片文件至网页里. 第四.添加完需要压缩的图片后,设

将matlab的figure保存为pdf,避免图片太大缺失

有时画的matlab图太大,或者有太多的子图,导致图太宽,如果直接保存成pdf的话,会导致左右边丢失,显示不下.一个有效又简单的办法是: 1.在matlab figure里面,Edit -> Copy Figure 2.在adobe acrobat里面,文件->创建PDF->从剪贴板. 就这么简单,根本无需什么eps2pdf,什么illustrator打印之类的 from: http://blog.sciencenet.cn/blog-242887-642730.html http://

vue父组件props参数太大时子组件created取不到数据-解决方法

问题: 父组件调用子组件: <mk-form :list="formList" :formvalue="formvalue"></mk-form> 其中的formList数据是用ajax调用的,数据比较大,应该有些延迟 子组件的created中调用props时,输出的是默认数据: 输出:  解决方法: 第一种:加上 v-if 来判断数据是佛加载完成了,加载完了再渲染: <mk-form v-if="formList!=null

解决phpcms图片太大撑破表格图片自适应图片按比例缩小

css代码: img,a img{ border:0; margin:0; padding:0; max-width:590px; width:expression(this.width590?590px:this.width); max-height:590px; height:expression(this.height590?590px:this.height); } 上面的代码会出现2个问题! 1.会把图片变的非常 img,a img{ border:0;  margin:0;  pad

微信小程序解决存在图片太大而有效显示区域较小--阿里云oss产生缩略图

OSS是使用通过URL尾部的参数指定图片的缩放大小 图片路径后面拼接如下路径:     ?x-oss-process=image/[处理类型],x_100,y_50[宽高等参数] ?x-oss-process=image/resize,m_fill,h_高度,w_宽度,limit_0 //去除之前的参数,添加新的参数resp.list.map( item => { item.logo = item.logo.replace(/\?([0-9a-zA-Z/=_-]+)/g,'?x-oss-proc

java中Double类数字太大时页面正常显示而不要用科学计数法

DecimalFormat   format   =   (DecimalFormat)   NumberFormat.getPercentInstance(); format.applyPattern( "#####0 "); String   temp   =   format.format(Double.MAX_VALUE); System.out.println(temp); double   a;   //   test DecimalFormat   df   =    

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment