为什么当我调整浏览器大小时我的背景图像一直在缩小？

当你调整浏览器大小时，背景图像一直在缩小的原因可能是因为你使用了相对单位来设置背景图像的大小。相对单位是相对于父元素或视口的尺寸来计算的单位，当父元素或视口的尺寸改变时，相对单位会相应地调整。

常见的相对单位有百分比（%）和视口单位（vw、vh、vmin、vmax）。如果你使用了百分比单位来设置背景图像的大小，那么当浏览器窗口大小改变时，背景图像的大小会按照相对于父元素或视口的比例进行缩放。

解决这个问题的方法是使用绝对单位或固定像素值来设置背景图像的大小。绝对单位如像素（px）不会随着浏览器窗口大小的改变而改变，因此背景图像的大小也会保持不变。

另外，还可以使用CSS的媒体查询功能来针对不同的屏幕尺寸设置不同的背景图像大小。通过在CSS中使用@media规则，可以根据屏幕宽度或高度的范围来应用不同的样式，包括背景图像的大小。

总结起来，当你调整浏览器大小时，背景图像一直在缩小的原因可能是使用了相对单位来设置背景图像的大小。解决方法可以是使用绝对单位或固定像素值，或者通过CSS的媒体查询功能针对不同的屏幕尺寸设置不同的背景图像大小。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云CDN加速（CDN）：https://cloud.tencent.com/product/cdn

相关·内容

【学习图片】1.图片简史

它是1993年在Netscape（当时叫“Mosaic”）发布的，并且在1995年加入了HTML的规范，一直在Web平台中扮演着一个简单但强大的角色。...从视觉上看，这完美无瑕-缩小光栅图像在视觉上是无缝的。通过一两行CSS，缩小的图像看起来就像我们指定了一个图像源，而这个图像源就是要以这个尺寸显示的。...使用 img { max-width: 100% } 意味着，当灵活的容器调整大小时，图像将根据需要缩小。与设置更严格的 width: 100% 不同，这也确保图像不会超过其固有大小而被缩放。...但是，尽管这种方法在视觉上简单有效，它也带来了巨大的性能代价。由于仅支持一个图像数据源，因此该方法要求我们提供具有尽可能大的内在大小的图像资源。...当响应式Web设计成为主流开发实践时，浏览器对img的性能进行了优化，但除了最优越的用户外，页面的图像内容从一开始就是低效的。无论浏览器如何快速请求、解析和渲染图像源，该资源很可能比用户需要的更大。

1.1K4 0

不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度

如果对影响元素计算高度和宽度的 CSS 属性使用固定值，当文字大小增大时，元素内部的文字会被截断。还不信服？你可能会想："但当我把浏览器放大到 200% 时，按钮文本看起来很好！"...这可能是这个标准的一个常见误解。我以前不知道浏览器缩放只是问题的一部分！...文档说：如果用户代理不提供缩放功能，但允许用户更改文字大小，那么作者有责任确保在调整文字大小时内容仍然可用。...这个标准也是为什么 CSS font-size 属性使用 rem单位，而 line-height 属性不使用单位的一个原因。在没有浏览器缩放等机制的情况下，文字大小必须可以调整到 200%。...根据我的经验，随着视口尺寸的缩小，我发现这种方法更难维护。想象一下，一个具有大文本大小设置的移动设备。使用 em 单位设置的文本容器可能会比视口宽。

1221 0

为什么你永远不应该在CSS中使用px来设置字体大小

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。...作者指出，相对于容器、浏览器或用户的字体大小，px值是静态的。无论用户的字体偏好设置如何，当我们以静态像素设置值时，它将覆盖用户的选择，以我们指定的确切值替代。...屏幕使用称为像素的彩色光点阵来显示图像。一个像素是显示器上的一个彩色光点；硬件能够呈现的最小可能的“点”。这就是我在本节中所说的“字面上的”、“实际的”或“设备”像素；物理世界中的一个像素。...(zh-Hans) 所以，这里的总结是：当用户更改字体大小时， px 值不会缩放。 em 和 rem 的值会随字体大小成比例调整。...虽然我认为如果你选择这条路，你可能会没事，但我仍然认为 px 有其存在的意义。我们知道当用户调整字体大小时 px 值不会改变，这意味着像素单位实际上是某些美学元素的不错选择。

1.8K2 0

如何在 CSS 中设计出漂亮的阴影？

为什么要使用阴影？我保证，我们很快就会谈到有趣的CSS技巧。但首先，我想退后一步，谈谈为什么阴影存在于CSS中，以及我们如何最大限度地利用它们。阴影表示高程，而较大的阴影表示更高的高程。...拖动”显示”滑块以查看我的意思：我希望我构建的应用程序感觉触觉和真实，就好像浏览器是进入不同世界的窗口一样。阴影有助于推销这种幻觉。这里也有一个战术上的好处。...在光线追踪中，数百束光从相机中射出，从场景中的表面反弹数百次。这是一种计算成本高昂的技术;生成单个图像可能需要几分钟到几小时！ Web用户没有这种耐心，因此box-shadow算法更加简陋。...hsl(0deg 0% 0% / 0.4) 当我们在背景颜色上叠加黑色时，它不仅会使它变暗;它也使它变得不饱和。比较这两个框：左边的框使用透明的黑色。...如果你发现CSS令人困惑或令人沮丧，我想帮助改变这一点。您可以在 css-for-js.dev 上了解更多信息。滤镜：阴影在本教程中，我们一直在使用box-shadow属性。

4851 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

，并将剩余空间 ( 1fr ) 应用于主区域，而auto调整大小的行将采用其子项的最小内容的大小，以便该内容大小增加，行本身将增长以进行调整。...这会将标题、描述和图像块放在父卡片内的垂直列中。...保持我的风格：clamp(, , ) 图片这里，我们介绍一些只有少数浏览器支持的技术，但这些技术对布局和响应式 UI 设计有非常令人兴奋的影响。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。...不过，我确实想提及这一点，因为这是一个经常遇到的问题。这只是简单地保持图像的宽高比。使用 aspect-ratio 属性，当我调整卡片大小时，绿色视觉块保持 16 x 9 的宽高比。

4.7K2 0

图片该如何优化来提高网站的性能，这里提供几种方法

因此，虽然网络图像需要清晰明快，但它们尺寸可以缩小压缩的，使用加载时间保持在可接受的水平。...在我的网站上，我注意到我的主页的页面大小超过了 1.1MB，图片占了约88%，我还注意到我提供的图像比它们需要的大(在分辨率方面)，显然，还有很多改进的空间。...JPG 使用场景 JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。...例如，当我将屏幕截图从上面转换到 WebP 时，我得到了一个 88kb 的文件，其质量与 913kb 的原始图像相当，减少了90% ! 看看这三张图片，你能说出区别吗?...原图PNG (913kb) 优化PNG图像(187kb) WebP图像(88kb，可在Chrome或Opera浏览器中浏览) 就我个人而言，我认为视觉效果是可以比较的，而且节省下来的大小是不容忽视的。

1.2K2 0

【愚公系列】《AIGC辅助软件开发》031-AI辅助解决各种疑难杂症：警惕小众场景下的误导性回答

纹理集将多个小纹理打包在一个大的图像文件中，而每个子纹理的纹理坐标都在 0~1 范围内相对于整个图集。...例如，如果你只想显示纹理的一部分（例如图像的上方部分），那么你会看到 `vTextureCoord.y` 范围缩小到某个比例，而不是 0~1。 ### 3....### 结论 `vTextureCoord.y` 的取值范围为 0~0.6 通常是由于纹理只是大纹理集或图像中的一部分，或者你正在使用裁剪或缩放模式。...通过这些检查，你可以了解为什么 `vTextureCoord.y` 的范围缩小到了 0~0.6。 2.部分安卓浏览器中的禁止滚动失效在前端的许多业务场景中，可能会遇到需要禁止滚动的情况。...为什么在部分安卓浏览器中，body设置了overow=hidden 但页面还是可以滚动?

1170 0

时至今日，浏览器色彩居然仍旧失真？

我们有理由想要一个不同的效果，这就是为什么我们有混合模式，但这些是明确的设计选择。...你的浏览器透明度失真情况 post15image5.png PNG的透明度 post15image6.png CSS rgba()背景 post15image7.png CSS的不透明度 post15image8....png SVG填充不透明度正确的缩放比例 post15image9.png 一个按2次方缩小的测试图像灰色方块的外部和内部应该是相同的整体亮度，因为它们都发出了平均亮度为白色一半的光。...不正确的渲染会使外侧的部分更暗。图像在缩小时应保持相同的整体亮度。不正确的渲染使最小的图像过于黑暗。...你的浏览器缩放比例失真情况 post15image10.png with dimensions post15image11.png CSS背景-图像 post15image12.png CSS

4.3K17 7

ps切图必知必会

,有时候呢,设计师给我们的图,也并非是一成不变,往往也需要作一些调整,更改,完美的将UI设计图,进行还原实现产品经理的意图,是前端小伙伴职责所在,那么熟练简单的ps操作,就很重要了,虽然我们不是设计者,...,不过快捷键使用可能存在差异) 为什么要进行切图,PS与前端的关系 ?...) 矩形选框工具(可以量图片,图标的具体尺寸,注意进行图片选中复制时,图层的上下关系与后面的数字没有系,与他的排列顺序有关,图层越靠上,层级就越高,可以手动的拖拽,调整层级关系,通过它来切图,去除矩形选框...IE浏览器按住Alt键+鼠标点击一下图片控制台调试工具的Source下的image,可以进行抠图合成雪壁图(css sprite) 意义:把页面上的很多小图合并成一张图,利用背景定位的技术实现,减少...,等简单的处理,以及从网页中抠图的很多办法,以及最后把多张图片合成一张雪碧图,也就是css sprite,以及使用利用背景定位,嵌入到网页中去以下是本篇提点概要前提条件(ps软件) 为什么要进行切图

3K2 0

ASML揭秘High NA EUV：8nm分辨率，晶圆台加速度最高32g！

但摩尔定律本质上成为普遍法则是有原因的：50 多年来，晶体管“微缩”一直是计算能力指数级增长的幕后推手。多年来，我们一直在将深紫外 (DUV) 光刻技术推向极限。...除了光刻分辨率之外，焦距深度（ Depth of Focus，DOF）也至关重要，大的焦深可以增大刻蚀的清晰范围，提高光刻的质量。而焦距深度也可以通过提高系统的折射率（n）来改进。...当我们的第一个预生产 EUV 光刻平台 NXE 于 2010 年首次发货时，它的 CD 从 DUV 的 30 nm 以上下降到 EUV 的 13 nm。一、什么是高数值孔径 EUV 光刻？...该系统的镜子不是均匀地缩小正在打印的图案，而是在一个方向上将其缩小 4 倍，在另一个方向上缩小 8 倍。该解决方案减少了光线照射十字线的角度并避免了反射问题。...而且，与我们的 NXE EUV 系统一样，EXE 系统由可以在集成到完整系统之前进行独立测试的模块组成。为什么我们在整个 EUV 光刻系统中优先考虑通用性和模块化？

2941 0

面试官：你了解过移动端适配吗？

这样就暴露出来一个问题，我们如果手机分辨率翻倍，我们的图像不就要被缩小一倍，我们难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同啊，其实你担忧的问题，我们的乔帮主在很多年前就想到了。...区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。...这些浏览器会忽略用rem设定的字体大小举个例子： //假设我给根元素的大小设置为14px html{ font-size：14px } //那么我底下的p标签如果想要也是14像素 p{...这个方案只是个过渡方案，为什么说是过渡方案因为当年viewport在低版本安卓设备上还有兼容问题，而vw，vh还没能实现所有浏览器兼容，所以flexible方案用rem来模拟vmin来实现在不同设备等比缩放的

1.4K1 0

让图片完美适应：掌握 CSS 的object-fit与object-position

在过去，我们要么在图像编辑器中裁剪图像，要么通过设置宽度/或高度约束来调整图像大小（这不是一个完美的选择），或者执行某种复杂的裁剪，或者可能转而使用背景图像（如果图像不仅仅是为了装饰的话）。...这个指定的区域可能有固定的宽度和高度，或者可能是一个更具响应性的空间，如根据浏览器视口大小变化的网格区域。...当我们为图像应用不同的宽度和/或高度时，我们实际上是在改变内容框的尺寸。如果内容框的尺寸发生变化，图像仍然会填充内容框。...使用 object-fit 而不使用容器在上面的示例中，我们一直在使用 object-fit 来调整 div 容器内的图像大小，但我们在实践中看到的原理在没有容器的情况下同样适用。...在响应式布局中使用 object-fit object-fit 属性在图像的指定区域的尺寸响应浏览器视口大小的情况下可能最有用。

9651 0

神经网络似乎遵循一种令人费解的简单策略来对图像进行分类

CNN非常擅长对乱序图像进行分类，但人类并非如此。在这篇文章中，我将展示为什么最先进的深度神经网络仍能很好地识别乱码图像，以及这有助于揭示DNN似乎用来对自然图像进行分类的令人费解的简单策略。...通过更仔细地放置3 x 3卷积和额外的超参数调整，可以实现更高的性能值。这是我们的第一个主要结果：您只需使用一组小图像功能即可解决ImageNet问题。...例如，通常用绿色背景上的手指识别丁字裤（非常大的鱼）。为什么？因为这个类别中的大多数图像都有一个渔民像奖杯那样举起了一张十字架。...每当BagNet错误地将图像分类为tench时，通常是因为图像中某处的绿色背景上有一些手指。 ? 图像功能具有最多的类证据。我们展示了正确预测类（顶行）的功能和预测错误类（底行）的分散注意力的功能。...如果这就够了，为什么像ResNet-50这样的标准深网会学到任何根本不同的东西？如果丰富的本地图像特征足以解决任务，为什么ResNet-50应该了解复杂的大尺度关系，如对象形状？

4274 0

css布局优化：布局计算限制— containwill-change合成层

一般情况下，浏览器会把整个 DOM 作为 CSS 布局上下文，因此：当我们改变部分 DOM 的样式时，也会影响到其他部分。...属性的值：cover和contain的缩放背景图background的cover和containcontain，按比例调整背景图片，使得其图片宽高比自适应整个元素的背景区域的宽高比，因此假如指定的图片尺寸过大...cover，按比例调整背景图片，这个属性值跟contain正好相反，背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话，那么背景图片就会被咔嚓。...contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。等比例缩放图象到垂直或者水平其中一项填满区域。...cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。等比例缩放图象到垂直和水平两项均填满区域。

1.4K3 0

《刻意练习》(上)：人人都能成为天才！

这本书是我认为会对很多人产生影响的一本书，因为很多人一定都有这些痛苦：觉得自己很努力的去学习一个技能，但是为什么见效甚微呢？...学生：我不知道，一次或者两次吧老师：那你是怎么练习的？学生：我不知道，我就是一直在埋头弹！！！ ?...这个故事在这本书里给我的印象非常深刻，因为我发现自己以前很多学习都和这个类似：我不知道，我就是一直在背单词，但是英语还是不好！我不知道，我就是一直在看书啊，但是考试还是啥都不记得！...当我读到这里的时候，我突然明白，其实脑书笔记的价值就是帮助建立一本书的心理表征，通过把知识转换成图像的方法在我们脑中创建一幅幅的“蒙娜丽莎” 让我们再一次练习吧，看看下面这个脑图图，然后闭上眼睛，尝试在脑海里重现这个脑图...其实我的FRM学习笔记的初衷就是想实践一下这个刻意练习的方法：首先设定学习的目标：能够清晰回答所有的考纲问题给自己设定专注的压力：至少要每周完成一个大章节。

7171 0

Excel集成网页控件，内嵌于Excel单元格区域，可加载任意网页

技术背景介绍前几天的网页控件短视频推文后，有读者反馈问是什么技术实现的，在此本着开源分享的心态简单介绍下。...同样地插入后的网页，不能类似普通图片那样轻松选择调整大小删除移动位置。如果有使用过Excel催化剂的插入图片功能，就可以知道其中的不同。...而当需要保留到网页控件中当前网页的鼠标滚轮的激发操作如普通网页有右侧滚动条时，会滚动网页位置和特殊的网页如EasyShu生成的ECharts图表网页，滚动操作有放大缩小矢量地图的作用。...按住CTRL+鼠标滚轮，亦可放大缩小网页，但是基于浏览器窗体的放大缩小，保留和普通浏览器一样的体验，但也会和Excel的快捷键冲突，变成是工作表显示的放大缩小，只有在100%显示大小时，才能调出上下文菜单...功能的完善和使用体验的提升，一直在努力，特别是本次国庆期间的升级，让在线版的更新体验提升许多，在迁移服务器的过程中，追加了许多主流的服务器技术如对象存储和CDN网页加速速度，这些体验的提升，也增加了不少的费用

1.2K3 0

EfficientNet解析：卷积神经网络模型规模化的反思

从2012年至今，研究人员一直在试验并试图提出越来越好的体系结构，以提高模型在不同任务上的准确性。...例如，可以从ResNet-50扩展到ResNet-200，也可以从ResNet-50缩小到ResNet-18。但为什么是深度缩放呢?...Width Scaling (w): 当我们想要保持模型较小时，通常使用这种方法。更广泛的网络往往能够捕获更细粒度的特性。此外，较小的型号更容易训练。这不正是我们想要的吗?小模型，提高精度?...这也是为什么在复杂的任务中，如对象检测，我们使用图像分辨率像300×300，或512×512，或600×600。但这不是线性的。精度增益下降得很快。...不同值的ϕ产生EfficientNets B1-B7。结论这可能是我到目前为止读过的2019年最好的论文之一。这篇论文不仅为寻找更精确的网络打开了新的大门，而且还强调了寻找更高效的架构。

1.2K3 0

霍金两问北京：人类的未来如何达到完美?我们为何探索另一星球?

他试图和北京的听众探讨两个终极问题：人类的未来如何达到完美？我们为什么要探索另一星球？...我今天的演讲，是关于在宇宙这一背景下，地球和人类所扮演的角色。为了最好地阐述，我需要从两个维度出发，一是思考人类的未来，二是研究我们探索太空、寻求其他潜在宜居星球的选择。...我今天的目的，是问大家两个问题。首先，我们需要做什么才能够确保，在力所能及的范围内，人类的未来达到尽可能完美？其次，我们为什么要考虑探索其他宜居星球？一个原因是，对我们来说，地球变得太小了。...如果“突破摄星”计划能传回毗邻星系中宜居星球的图像，这对人类的未来必将产生深远影响。希望我已经解答了我演讲一开始所提出的问题。人类作为独立的物种，已经存在了大约二百万年。...我们的文明始于约一万年前，其发展一直在稳步加速。如果人类想要延续下一个一百万年，我们就必须大胆前行，涉足无前人所及之处！感谢大家的聆听。

5653 0

CSS_Flex 那些鲜为人知的内幕

这些元素通常是具有外部资源（如图像或嵌入式框架）的元素，其内容由浏览器根据其属性和上下文动态生成。以下是一些常见的替换元素：「元素：」通过 src 属性引用外部图像。...为什么它们不共享相同的选项呢？我们将很快揭开这个谜团，但首先，我需要分享另一个对齐属性：align-self。...「事物是流动和灵活的，可以根据世界的限制进行调整」。 6....我们可以通过设置flex-shrink: 0来实现： >> 当我们将flex-shrink设置为 0 时，实质上我们「完全退出了缩小过程」。...无论我们如何增加flex-shrink,内容将溢出而不是继续缩小！ ❞ 文本输入框的默认最小大小为 170px-200px（在不同的浏览器之间有所变化）。在其他情况下，限制因素可能是元素的内容。

2971 0

花 31 万元重新设计网站后，我后悔了

我想这应该只需要几个小时，但我并没有拿到我想要的东西。相反，WebAgency 一直在重新设计网站。他们的首席设计师说没有时间设计 Logo，但对于这个登陆页的设计想法，我又该作何感想？...现在，一个小小的背景色调整就需要反反复复三次。二月初，我给 Isaac 发了封邮件，问他发生了什么事。他通过电话为项目的进展情况道歉，承认 WebAgency 的内部问题影响了我的项目。...如果一个 10 小时的任务看起来要变成一个 25 小时的任务，我们会重新评估是否要取消或缩小这个任务的范围。...避免成为供应商最小的客户当我们开始这个项目的时候，WebAgency 告诉我，他们的大多数客户都比我大，但他们想帮助我成长。...在还是按小时计费时，WebAgency 一直把我放在优先位置，但当我升级成预付费客户后，他们很难在我的预算范围内提供有效的结果。

2672 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云