设置背景图片随着浏览器缩放保持不变

最新推荐文章于 2024-06-06 15:53:07 发布

触不到的颜色是否叫彩虹

最新推荐文章于 2024-06-06 15:53:07 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/qq_28259083/article/details/78043770

版权

这篇博客探讨了如何在浏览器缩放时使div背景图片的宽度和高度都能保持不变，目前实现的是宽度不变，但高度会变化。作者提供了设置div高度的代码片段，并表示会后续完善解决方案。

摘要由CSDN通过智能技术生成

图片是作为div背景存在的，div的width是100%，height是根据屏幕高度计算的。用这种方法只实现了浏览器缩放背景宽度上保持不变，但是高度变了

background-image: url(../images/bg_1.jpg);
background-size: 100%;
background-repeat: no-repeat;

以下是设置div高度的代码

var changeBg = (function(){
   
        var count = 0,
            height = (document.body.scrollHeight > document.documentElement.scrollHeight ? document.body.scrollHeight : document.documentElement.scrollHeight) - $(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

触不到的颜色是否叫彩虹

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue3保持屏幕缩放比例（缩放的多大都是固定不动的）

weixin_45441173的博客

01-26

924

vue3保持屏幕缩放比例

让网页背景图片 固定，不随缩小放大而变化

道路是曲折的，前途是光明的

09-12

1万+

最近在百度首页，缩小放大时，发现背景图片一直保持不变，只是内容在变化，看看了源码，才知道怎么回事。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0}

参与评论您还未登录，请先登录后发表或查看评论

页面背景图尺寸不随浏览器缩放而变化

北辰

10-08

4551

应用前提：当我们为某一个元素设置了背景图以后，希望该背景图不会因为浏览器的放大而放大或者随着浏览器的缩小而缩小方法一：把图片作为背景图片（background） background-size：cover，这个CSS3的属性作用是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中，如果不使用这个属性，在IE11和FireFox中缩放浏览器，背...

设置背景图片不随浏览器放大而改变(背景固定，只上层div滚动)

乐小淘的博客

10-22

1703

onunload测试 body{ margin:0; padding:0;} #con{ position:fixed; top:0; left:0; height:100%; width:100%; background-image:url("t01a3c415ab2e1e4223.jpg"); background-position: center 0; backgrou

CSS 实现背景图尺寸不随浏览器缩放而变化

DAIJZ12138的博客

03-13

2049

转自：https://www.cnblogs.com/dee0912/p/3983662.html

div背景的图片不能跟随大小变化的问题

隔壁张同学

06-03

1875

div背景的图片不能跟随大小变化的问题记录下自己在工作中遇到的问题：背景：要在项目首页的中加入一个背景图片，然后这次用的是DIV，在DIV中加入背景图片，然后在body中加入 <div class="ho" style="height:100%;width: 100%;"> </div> .ho { background:url(../ima...

CSS实现背景图尺寸不随浏览器缩放而变化的两种方法

12-13

一些网站的首页背景图尺寸不随浏览器缩放而变化，例如百度个人版的首页，缩放后背景图的尺寸并不改变：再比如花瓣网( huaban.com )：现在用CSS来实现这一效果。首先需要一张足够大尺寸的图片，上图百度...

HTML5网页背景自适应缩放代码，背景不随滚动条滚动，会根据分辨率不同自动匹配对应的背景图片，兼容主流浏览器(不兼容IE678）

05-23

`background-image`定义了背景图片的URL，`no-repeat`表示背景图像只显示一次，`center center`将图像居中，`fixed`使得背景图像在滚动时保持位置不变，而`background-size: cover`则实现了背景图像的自适应缩放。...

CSS实现图片居中且缩放不影响图片纵横比

Einstellung的博客

03-09

4456

实现代码我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中下面是代码： <!DOCTYPE html> <html> <head> &lt

十六、移动端-图片及背景图的缩放

快乐de馒头

09-05

1005

做了一组移动端的页面，在布局时遇到了一些问题，总结下以避免再次掉坑。遇到的问题：1.图片及带背景图片的块宽高等比缩放布局2.,padding百分比布局图片及带有背景图片的块的图片宽高等比缩放纯图片可以使用img标签，将其宽度设置成百分比，高度会自动按比例缩放。控制起来很方便。带背景图片的div就有点麻烦了，宽度可以使用百分比，但高度如果不设置具体数，会按照内容大小自动布局，这个问题处理起来有点点小麻烦。解决方案是使用百分比padding将块支撑起来，但具体的百分比padding如何计算。

Vue - 超强实现网页禁止浏览器缩放功能，浏览器缩放时保持网页不变形、元素不会被挤压等，屏蔽浏览器鼠标滚轮缩放页面（提供详细示例代码，一次引入整个网站无人可以搞乱你的页面布局及样式）

王佳斌

03-17

8373

vue，nuxt，禁止浏览器缩放，如何用户缩放浏览器导致页面变形，网页缩放后页面变形了怎么办，怎么解决网站被缩放后元素乱套错乱，vue怎么禁止网页不被缩放，vue如何禁止浏览器缩放，vue缩放网页变形影响布局怎么办，vue电脑分辨率及缩放导致页面变形的问题，前端页面解决浏览器或者系统被放大和缩小导致的显示问题，Vue中页面自适应缩放，如何防止Vue页面缩放时变形/调整大小，Vue项目中,防止页面被缩放和放大，vue等比例缩放网页，网页缩放后界面变形咋办，禁止页面缩放，vue禁止浏览器改变窗口大小，Vue项目

html如何设置网页的背景图片，使放大或缩小浏览器时，页面排版和背景可以随浏览器放大缩小而排版不会改变，

zhangdouhua的博客

11-01

9543

用DIV+CSS写网页背景代码时，应该先写一个DIV，在这个DIV的CSS里面添加背景图片，并设置其margin为auto，宽度为100%或者auto；然后在这个DIV里面在写一个DIV，在第二个DIV里面设置CSS样式，宽度为背景图片的实际宽度，然后在写在背景图片之上的其他内容，这样用户在缩放浏览器的界面时，这个div里面的内容可以与图片位置相对固定，使排版不会随着界面的缩小或者放大而改变；具体...

关于大背景图片随浏览器百分比缩放的问题

夕酉 ~淡然处世~

01-17

5790

新手，此文为整理自己的疑惑。存在问题欢迎指正，多谢。最近在写一个学校的引导页，背景图片1920*679。以前写适应屏幕都是用100%写，所以这一次依然这样写了，但是这次却是一个有内容的背景图片，所以100%的方法导致logo等被压缩变形了。后来又被要求，屏幕是100%的时候显示图片中间的内容部分，浏览器内容缩放后，整个背景显示出来，即两边隐藏的背景也显示出来，并且在屏幕

vue+elementui项目中，页面实现自适应，缩小放大页面排版基本保持不变