问题标签 [background-size]

我有以下代码：

是否可以更改背景图像的宽度？

问题是我有一些绝对定位的 DIV，它们有 background-size: cover; 并且它们的高度由 javascript 计算以填充 100% 的视口。在每个桌面浏览器和移动 Firefox 上一切都很好，但在移动 chrome 地址栏上（出现/消失时）会更改 $(windows).height(); 价值。这会导致每次执行此操作时都会重新缩放古怪的背景图像。是否有始终显示地址栏的解决方法（因此窗口高度值不会改变），或保持背景大小的其他解决方案：覆盖；无论地址栏如何，都一样缩放？

我使用背景图片创建了一个 twitter 背景按钮：

html:

为了应对视网膜显示屏幕，我将原始背景图像稍大一些（64px x 64px）并使用 css background-size 减小大小。chrome 中的图像显示很清晰，但在 Firefox 中，图像看起来很模糊，即使我将图像稍微放大了一点....

CSS：

http://codepen.io/vincentccw/pen/krqLC

我已经研究了很多关于为什么我的 JSTree 在 IE8 中渲染非常糟糕，而在 Chrome 中完美运行的原因。至少其中一个问题是 IE8 缺乏对 css-property 的支持background-size。我正在使用自定义图标来表示文件夹和文件。树结构中的每一行在 IE8 中的高度为 24px，而在 chrome 中为 40。后一种浏览器通过自动环绕图标大小来计算行高，使用background-size: auto;. IE8 没有。

我尝试实现许多不同的解决方案来弥补 IE8 缺乏的功能，例如：

如何使背景大小在 IE 中工作？

IE 8：背景大小修复

和链接到https://github.com/louisremi/background-size-polyfill

但是，由于 jstree 的复杂性，而且它是默认的 css 文件，我很难将这些解决方案中的任何一个实施到现有代码中，因为我缺乏完全理解 default.css 结构的经验.

完成这项工作的正确做法是什么？我还为 IE8 搜索了兼容的 .css 文件，但一无所获。

一个能证实我担心必须从头开始创建自己的 .css 并完全理解它的答案也将非常受欢迎。但是，在我投入时间去做之前，我希望有第二个意见。

编辑： 这些是我目前情况的截图：

Chrome 有很好的间距和可见的人字形/箭头/扩展图标。此外，字体工作。

IE8 没有自动调整大小，这使得高度为 24 像素而不是 40 像素。我试过手动将它们设置为 40，但没有运气。缺乏视觉技巧并没有给我带来太多困扰，但是缺少箭头扩展图标对我的应用程序的可用性至关重要。

当前主题的工作编辑将被接受为答案。因此将链接到与 IE8 兼容的替代主题。或者任何可以帮助我理解如何自己解决问题的东西。

当我将 div 图像的 background-size 属性设置为background-size: cover;or background-size: 100%;时，两者看起来相同。

有什么不同？我什么时候应该使用掩护，什么时候使用 100%？

我正在为 IE8 使用 hack 来获得最大宽度。该脚本在本地运行良好，但是当我将其上传到服务器时，由于某种原因它无法正常工作。链接在这里

黑客是

我想让这个脚本工作，因为它在本地是完美的，我尝试了很多其他的，它与已经运行的其他脚本有冲突。

我正在尝试将图像设置为background-image. 我将其设置background-size为100%这样它就不会重复或对于大屏幕分辨率或缩小时太小。现在的问题是，在移动设备上，背景图像变得太小并移出可见区域。

我怎么解决这个问题？那么有更好的解决方案background-size:100%吗？

CSS：

我希望在窗口宽度调整大小时一起动态调整 div 高度/宽度，就像在 (background-size:100%) 中一样，我更喜欢“如果可能”只使用 CSS。

先感谢您 ：）

在一个网站上，我有一个用于控制图像序列的滑块（我使用的是 jQuery UI 的滑块）。图像在页面背景中全屏显示（我使用的是背景尺寸：封面）。在我的开发 PC 上，它运行良好，但是当我在功能较弱的计算机上尝试它时，它就变得迟钝了。

我做序列的方式很简单。这是我的一些代码，可以大致了解我在做什么。（我认为该代码对我的问题不是必需的，但我还是添加了它......随意跳过！）

HTML：

CSS：

jQuery：

通过测试不同的东西，我设法找出导致 Chrome 性能问题的原因。罪魁祸首是背景尺寸：封面。一旦我删除背景大小属性并使用图像默认大小，我几乎没有滞后。

当我使用 background-size:cover 并且我的图像与我的 Chrome 窗口大小相同时，性能会更好。但是相对于原始图像大小，图像被拉伸（或压缩）越大，我得到的延迟就越大。

到目前为止，我对其进行优化的唯一方法是使用不同的图像大小并使用 JavaScript 以更接近浏览器窗口的大小加载序列，并希望它不会滞后。这意味着如果用户调整浏览器窗口的大小，我可能必须重新加载另一个图像工具包。

知道如何优化 Chrome 中的图像序列以获得更好的性能吗？

My backgrounds looks totally wrong on my Ipad and Iphone, when I test it. I have search here on stackoverflow for my problem, but without luck! I know that "background-size:cover" is the problem, but i don't know how to fix it.