一、问题描述：

最近小编在编程时遇到一个问题，放了一张背景图，在笔记本（15.6寸）上看的是铺满屏，但是换了24寸或27寸屏幕再看效果时，就发现了下面两张图片的问题：

1.多了一段滚动距离

2.换大屏时背景就变小了：

二、需要了解知识

那就是“vh”和“vw”；

vw单位可以根据窗口的宽度自动改变大小，1vw是窗口宽度的1%；
vh单位可以根据窗口的高度自动改变大小，1vh是窗口高度的1%；

刚学习CSS和HMTL大多师兄只会的单位应该就是“%”和“px”；

但是在实际开发中，知道这两个远远不够，比如今天的问题，我们就需要“vh”和“vw”来解决

三、解决：

1.HTML上：

src可以引用一张自己的图片

<div id="Max_box"><img src="The Game Map.jpg" alt="" width="100%" height="100%"></div>

2.css上：

#Max_box {width: 100%;height: 100vh;
}

这样就能在不同屏幕大小的情况不会出现产生一段滚动条或者缩小了

这次小编只用了vh，因为它已经足够解决目前的问题了，

当然日后需要各位师兄灵活转换，vh和vw同时使用还是单个使用

四、效果：

问题得到了解决，无论是多少寸的屏幕，背景图都是铺满整个窗口

如果文章有不足欢迎指责，也欢迎各位师兄指导

《前端》解决背景适配不同屏幕大小，如何解决因屏幕大小的不同而导致背景的放大或缩小。相关推荐

前端自适应常适配的屏幕大小
/*** 媒体查询,参考部分Bootstrap框架*/ /**当前页面大于1200px时,大屏幕,主要是PC端.**/ @media (min-width: 1200px) {} /**在992和11 ...
【前端】页面适配？移动端适配屏幕的各种解决方案！
前言由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽 ...
php自动适应屏幕大小,如何解决js获取屏幕大小并且让图片自适应的方法
在写h5页面的时候,经常会需要将图片自适应大小,一般都是用等比例的缩放,这就有个问题,当上传的图片不是一个规格时就会出现展示图片不完美. 为了解决这个问题,我们可以通过js去获取图片的大小,然后在根据 ...
Linux图形界面当中，调整屏幕大小的解决办法
**Linux图形界面当中,调整屏幕大小的解决办法 1.点击右上角的电源按钮 2.弹出如下界面,点击第一个按钮 3.下拉点击Devices 4.选择Displays,更改Resolution选项中的合 ...
【Android 屏幕适配】屏幕适配基础概念 ③ ( 屏幕像素密度 DPI 与素材大小关联 | 屏幕像素密度 DPI 与屏幕密度限定符关联 )
文章目录一.屏幕像素密度 DPI 与素材大小关联二.屏幕像素密度 DPI 与屏幕密度限定符 xhdpi 关联参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持 ...
Android WebView加载网页，图片等元素宽度大小不兼容手机屏幕的宽度
无论是Android手机还是iOS手机,使用WebView加载一些没有专门为手机屏幕做适配的网页的时候,就会出现网页中的图片等标签元素的宽度大小和手机屏幕的宽度不一致的情况,如下图之所以会出现上面的 ...
android适配性报告,关于Android的多种屏幕适配
严格来说,作为读者,你应该带着批判性质的眼光来看这篇文章,因为这篇文章是一个尚未通读Android官方开发资料<Supporting Multiple Screens>的纯产品人员所写,相 ...
layui移动端适配_web前端-移动端适配方案
三微授渔,授你以渔一般情况下吗,设计稿的设计师按照 375 的尺寸设计,在手机(移动端)快速更新迭代的今天,每个品牌的手机都有着不同的物理分辨率和逻辑分辨率,此时 375 的设计稿,如果想要还原那基 ...
typora修改主题字体、代码块字体、行内块代码字体大小、引用块字体大小、代码块背景颜色、文章可写区域宽度以及修改教程
目录 0. 授人以渔 1.主题字体 2.代码块字体大小 3.引用块字体大小 4.代码块背景颜色 ①pink老师的样式代码 ②自己搜到的样式 5.块代码字体大小 6.修改文章可写区域的宽度 0. 授人以 ...
移动端适配详解 , 给你解决适配烦恼
试想一下,如果我们只能开发web端,那么移动端的网友由谁来做!那也太悲惨了所以,这里说的就是如何开发页面到移动端,适配各个手机型号,让页面在手机上跑起来- 目录理解些许概念 1. 开发的种类 2 ...

《前端》解决背景适配不同屏幕大小，如何解决因屏幕大小的不同而导致背景的放大或缩小。