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

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

常见的相对单位有百分比（%）和视口单位（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 单位设置的文本容器可能会比视口宽。

971 0

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

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

1.6K2 0

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

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

3531 0

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

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

4.6K2 0

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

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

1.1K2 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软件) 为什么要进行切图

2.9K2 0

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

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

2821 0

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

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

1.3K3 0

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

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

3954 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 光刻系统中优先考虑通用性和模块化？

2101 0

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

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

1.3K1 0

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

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

1.1K3 0

VBA实战技巧30：创建自定义的进度条2

有创意的进度条采用相反的方式来显示进度，将使用标签“缩小”而不是“增长”。诀窍是我们的标签不是进度的指示器。相反，有一个指示进度的静态图像，而标签将充当静态图形隐藏部分的遮罩，如下图5所示。...图5 通过将标签着色为与背景相同的颜色并将标签的位置放置在图像之上，可以在减小标签的大小时显示图像的一部分。当我们“缩小”标签时，它会给我们一种“增长”图像的错觉，如下图6所示。...图7 其灰色背景是一个插入的Image对象，它指向一个带有灰色边框的简单图像。进度条（静态图像）绿色的“Excel”进度条是一个绿色矩形的静态图像，带有重复四次的Excel图标，如下图8所示。...图8 进度条（“缩小”遮罩）与第一个示例相比，“缩小”的标签对象在操作上有两个主要区别。 Width属性的计算方法是将Pct乘以218（最大宽度）并从218中减少。...例如，如果Pct为0.5，则宽度为109，原218的一半。将计算标签的左侧而不是将Left属性固定到设置位置。逻辑是从230（标签的最右侧）中减去计算出的Width。

1.1K2 0

Refactoring UI

）是全宽的，就把所有内容都变成全宽的给每个元素留出它所需要的空间--不要为了让它与其他东西相匹配而把它弄得更糟 # 缩小画布如果你很难在大画布上设计出小界面，那就缩小画布很多时候，当限制条件真实存在时...这也适用于组件内部--除非你真的想让它缩放，否则不要使用百分比来调整大小 # 在需要时才缩小元素不要根据网格来确定元素的大小，而是给它们一个最大宽度，这样它们就不会太大，只有当屏幕小于最大宽度时才会强制缩小...# 添加覆盖层在背景图片上添加半透明覆盖层 # 降低图像对比度对整个图像进行调亮或调暗，而不仅仅是对有问题的区域进行调亮或调暗降低对比度会改变图像整体的明暗感觉，因此一定要调整亮度来进行补偿...，并给该形状添加背景色 # 不要缩小屏幕截图可以在小屏幕截图，空间大，就不用缩得那么厉害考虑只截取部分截图，这样就可以在更小的空间内显示，而无需缩小比例如果你确实需要在狭小的空间内放置整个应用程序的截图...# 控制形状和大小 .img-container { background-size: cover; } # 防止背景渗出当用户提供的图像的背景颜色与用户界面中的背景颜色相似时，图像和背景就会渗在一起

5573 0

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

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

6791 0

CSS_Flex 那些鲜为人知的内幕

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

2101 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

测试从0到1OCR初探培训（九）

Tesseract对于dpi >= 300的图片有更好的识别效果。所以在识别之前将图片调整到合适的尺寸有助于提高识别效果。...（DPI：Dots Per Inch，每英寸点数，图像每英寸长度内的像素点数） tesseract 我常买弹窗_300dpi.jpeg 我常买弹窗_300dpi -l chi_sim 2、Binarisation...许多图像处理程序允许在一个共同的背景下对字符的边缘进行膨胀和侵蚀，从而使字符的大小（膨胀）或缩小（侵蚀）。历史文献中大量的墨水流失可以用腐蚀技术来弥补。侵蚀可以用来缩小字符的正常字形结构。...通过tesseract用以上两种图像预处理的方法对图片处理后识别的结果也不理想，不能识别出期待的内容：已加入我常买 5、Rotation / Deskewing（旋转/反旋转）歪斜图像是指页面扫描不直的情况...（30min，1小时，3小时等）整体整整2000+字干货，没有“添油加醋”，绝对纯天然~

2.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云