问题标签 [background-size]

我正在将该background-size属性用于全宽和全高背景图像，但在纵向视图的 Nexus7 平板电脑上的 Chrome 中无法完全覆盖它。它只覆盖宽度而不是高度，即200px它下面大约有空白区域。但是，当我在桌面 Chrome（或其他任何东西）和垂直显示器上查看该站点以模拟纵向尺寸时，它没有任何问题。

有人有解决方案吗？

CSS：

纵向屏幕截图：

我如何调整图像的大小和重新定位框内的图像，使其覆盖整个框，类似于background-size: cover工作原理。

我知道我必须添加overflow:hidden到盒子和图像需要position: absolute。但是，让我获得正确的图像新尺寸和左+上位置的公式是什么？

I have a list of figures containing background images. Something like the following:

Each of these images has their background-size set to cover and background-attachment set to fixed.

When each of the figures takes up the entire viewport, this works fine, but if there is an offset of any kind the background-image gets clipped.

As far as I can tell this is by design (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).

I would like the images to either clip vertically or horizontally but not both, and be centred by the size of the figure itself.

I know there are javascript solutions but is there a way to do this using CSS?

Here is a working example: http://codepen.io/Godwin/pen/KepiJ

这段代码有什么问题？缩放过渡效果在 Internet Explorer 10 或 11 中不起作用（在其他浏览器中正常）。

我在这里看到的背景大小转换应该适用于 IE10/11
我的错误在哪里？
我在这里做了一个 Codepen

我有一个带有背景图像的 div 集：

使用以下 CSS：

背景大小在 Firefox、Safari 和 Chrome 中得到尊重。在 IE8 中，SVG 被 PNG 文件替换。但是，在 IE9 和 IE10 中，SVG 文件的大小大大减小。问题似乎与 div 的宽度和高度有关。如果我添加 150 像素的高度，则 SVG 会正确呈现。如果我把它变小（即 100 像素），图形就会开始缩小。

有没有人在资源管理器中找到解决此问题的方法？有没有办法告诉 IE 独立于 div 的宽度和高度使用 background-size 值？

我要发疯了。IE11 拒绝用背景图像填充 DIV 的整个区域，即使我已将 background-size 属性设置为覆盖。考虑以下示例：

CSS：

HTML：

Chrome、Firefox、Safari、Opera 都符合我的预期：无论浏览器窗口的比例如何，背景图像 bg.jpg 始终覆盖 DIV 的整个可见区域。

另一方面，IE11 没有，而是在 DIV 的左侧和右侧存在可见的间隙（在我的情况下）。当我禁用“背景附件：固定”规则时，它可以工作并且背景图像覆盖整个区域。固定，它没有。悲伤的脸。

这绝对是我正在处理的网站特有的问题，因为我知道 IE11 通常对此没有问题，但我看不到任何会导致此问题的东西。它让我的大脑受伤。我很想发布指向上述网站的链接，但我不能。如果您需要更多示例或有疑问，请随时提出。

非常感谢任何帮助/建议。谢谢！

更新：实际上，当背景附件设置为固定时，IE11 似乎完全忽略了背景大小：封面。叹。

更新 2：一些屏幕截图（希望）在一定程度上说明了问题。在 IE 中，背景似乎是固定的，但没有覆盖它应该覆盖的区域。

我在 IE 中遇到了背景大小的问题，所以我找到了一个允许它在 IE 中工作的 JavaScript，但我只希望在屏幕宽度低于 768 像素时应用背景大小。

这是我当前的脚本：

一旦你开始调整大小，这就会起作用，但是一旦你低于 768，它就不会删除背景大小，并且初始状态也没有背景大小。有任何想法吗？谢谢！

我有一个带有背景渐变的响应式圆形 div（使用 % 宽度、0 高度、% 填充底部和 50% 边框半径制作）。如果背景大小改变，它们在 webkit / Firefox 中不匹配

背景大小为 100% / auto 它们都符合预期：

但是当我将背景大小设置为其他大小时，它们会有所不同（自动 200% 显示在图像中）。Safari 和 Chrome 会按预期显示图像，但 Firefox 不会。网络套件： 火狐：

如果我将背景大小设置为自动 300%，它会在 Firefox 中正确显示，但在 webkit 中太大了。如果我使用 -moz-background-size 将 Firefox 设置为不同的设置，则较新的版本只使用背景大小。如果我使用 -webkit-background-size 将 webkit 设置为较小的版本，它们也会被 background-size 属性覆盖

风格：

我遵循了Code.tutsplus 上的 Parallax 教程，还看到了一些与此类似的其他内容。但是，由于某种原因，没有一个教程可以完美运行，因为总是在元素的顶部或底部创建一些空白区域。

因此，我决定更改代码以根据元素的高度和视差效果的速度来获取元素的“背景大小”属性。但它仍然无法正常工作并在底部创建空白空间。

请检查我的代码，让我知道可能出了什么问题：

这里也是css：

请让我知道我在这里做错了什么。谢谢

美好的一天。我有一个 div，其背景图像的大小设置为cover.

如何使用 javascript 或 jquery 获取背景大小？

我的意思是，背景将用其尺寸之一填充 div，宽度或高度，我想了解完整（计算）图像的宽度和高度，而不仅仅是可见部分。

假设我们调整了 wwindow 的大小，我们会看到背景覆盖了整个 div，当然有些部分是不可见的，因为“cover”会填充 div 的宽度或高度......对于每次调整大小，这是整个图像的尺寸（可见和不可见部分） ?