问题标签 [background-size]

我正在尝试设置 div 的大小（宽度和高度）以匹配它的背景图像大小，但我无法让它工作。背景图像大小必须以百分比表示，因为我正在处理一个响应式网站。在较小的屏幕上，背景应完全显示（宽度较小，但仍成比例），并且拥有图像的 div 应遵循该大小。

我尝试了背景大小的各种值，例如自动 100%、覆盖、包含等，但没有任何效果。这里有一个类似的问题：将 div 缩放到背景图像大小，但它也没有解决我的问题。

如果有人知道该怎么做，我将不胜感激。

编辑： 我做了一个小提琴来展示行为：http: //jsfiddle.net/osv1v9re/5/ 这行是什么使背景图像如此之小：

但是如果它被移除了，背景会填充适当的宽度，而不是高度。

我经常使用background images在圆角正方形内显示图标。有时为了响应的目的，我需要减小正方形和其中的图标的大小。

但是当我有几个图标显示为background images不同大小时，我想显示所有图标，比如它们原始大小的 70%，我不能只设置 a background-size: 70%，因为这意味着 70% 的正方形，而我想要的是background image自身尺寸的 70% 。

有什么方法可以在 CSS 中实现这一点？

我正在建立一个 Wordpress 网站。在主页上，我试图在不影响滑块下其他 div 的情况下定位一个球，主题制造商已经给出了相同的类名。我想做的是把球弄小，放在文字下面。该主题不允许我为该图像分配一个类。这是我尝试过的，但它会影响该行中的其他图像。有人可以帮我吗？我想我可以使用第一个孩子，但不确定。谢谢！

我有背景图像的 div 大小未知。它可以是 16 像素高，也可以是 1600 像素，以及介于两者之间的任何值。那里有一个大约 440 像素宽和 250 像素高的背景图像。

当 div 大于 250px 时，背景图像不会缩放。这是期望的行为。到目前为止，一切都很好。

如果 div 的高度低于 250 像素，则背景图像将被剪裁。这是不需要的：我希望它缩放到 div 的较小高度。

我如何使用 css（或者，如果不可能的话，js）在背景图像不适合其 div 时缩小背景图像，但在 div 大于自身时永远不要放大？本质上，我想使用background-size: contain;，但将最大值设置为图像的高度。

我尝试了各种封面和包含，但都没有达到预期的效果。

这个问题也无济于事，因为我无法在 div 上设置最大高度。它包含网站编辑器添加的内容。如果这很多，那么所有这些都必须显示。

这是一个小提琴：http: //jsfiddle.net/Bakabaka/2zetkrg0/

我在尝试制作流畅的 HTML 页面时遇到问题。（我想考虑不同大小的分辨率，所以我正在使用宽度为 1920px 的背景图像）

所以我想制作几个堆叠的 div，每个都有一个通过 background-size 调整大小的背景。但是，我注意到除非我还手动设置 div 的高度，否则我无法获得 100% 或包含作为属性值。我可以使用设置的 px 或 % 手动设置它，但我觉得这不是动态设置 div 高度的最佳方法。

所以我想知道是否有更好的方法来设置div的高度，所以它设置为与具有背景大小属性的图像高度相同的高度，所以我没有得到所有的空白空间图像，如果 div 太高。

我在这里有一个活生生的例子：https ://jsfiddle.net/fcb1wcth/

// 我以前从未使用过背景大小，所以也许我做错了，但我想尝试制作一个适用于任何分辨率的页面。

谢谢你的帮助！

JSF 中。

为什么完全不.col-left-bg-image显示？

我刚刚意识到它没有显示，因为它里面没有任何内容。所以我把...它放进去检查并给它一个background-size:100% 100%（最初是auto 100%）。但结果background-image是显示了带有 的 div，但它不需要height100% 的父级（即.col-left）：s JSFiddle here

我还尝试使用内联img元素而不是divwith background-image，但这会导致灾难。JSFiddle 在这里。

我试图找出使背景图像完全响应的最佳方法 - 到目前为止，我能想到的最好方法是使用 background-size: 覆盖，正如大多数人倾向于建议的那样，但使​​用background-attachment: fixed以便图像在屏幕调整大小时缩小其比例，否则它只会保留其原始比例并且根本不缩放。仅使用 background-size:cover 拉伸图像以填充容器 div，但不会自动缩放比例..

但是，我不希望在您向下滚动时隐藏部分图像的固定背景的效果，并且希望它是背景附件：滚动，但我无法让它工作并使其也可以缩放。

所以我的问题是：有什么我不知道的方法可以让背景图像随屏幕大小自动缩放，而无需使用 background-attachment: fixed 来实现它？

请查看我的 JSFiddle，了解我目前所拥有的：https ://jsfiddle.net/uhoL5d5w/2/

（是的，我也知道在某些时候我需要使用媒体查询来为各种屏幕尺寸提供优化的图像）

我当前的代码如下所示：

我想将图像的背景大小更改为用户想要的宽度和高度。

我有一个表单，用户可以在其中输入正确的宽度和高度

如果输入发生变化，我想将背景大小更改为输入字段的值

我没有收到任何错误，但它也不会改变宽度/高度。

我在这里找到了这个问题。将值“none”添加到 preserveAspectRatio 确实解决了我在 Safari 中对于常规 . 但是，它并没有解决我的背景图像属性问题。

这些在除 Safari [v5.1.7] 之外的所有浏览器（Chrome、Firefox、IE、Opera）中都能正确扩展（如果版本很重要）。由于我希望显而易见的原因，我无法使用缩放属性（例如：适合、包含或覆盖），我必须保留对这些图形大小的控制。

这是它在所有浏览器中的显示方式 （我们正在查看灰色齿轮图标，而不是绿色和黄色图标）：

这是它在 Safari 中的显示方式：

SVG：

或者为了更容易阅读： http ://www.myhhf.com/images/svg.php?r=gear_icon （请在 Safari 中查看源代码，因为仅在 Safari 中设置了 preserveAspectRatio 值为 none 的条件。 )

HTML：

CSS （注意：这是从一个非常大的网站中截取的一小段代码。）：

更新：这是正在发生的另一个例子，结果略有不同：

所以~ 与齿轮图标不同的是，这个背景图像延伸到了它的整个容器。

SVG：

或者为了更容易阅读： http ://www.myhhf.com/images/svg.php?r=select （请在 Safari 中查看源代码，因为仅在 Safari 中为 preserveAspectRatio 设置了一个值为 none 的条件。 )

HTML：

CSS：

想法，想法，解决方案？

我目前正在处理的主页上有一个滑块。我正在尝试实现占据屏幕整个宽度的完整视口高度。

我目前可以实现这一点的唯一方法是拉伸图像，或者图像不居中。

图像需要在水平和垂直方向上大致居中对齐，以便客户在任何宽度的浏览器上都可以看到图像的中心，并且不会过度拉伸图像。

我试过背景尺寸：封面；在没有成功的元素上，因为它不是背景 img。容器目前有 100vh，但宽度是问题。

问题位于此处http://joeybox.info/。我意识到图像上方的菜单和徽标 100 视口高度将位于“折叠”下方，但是一旦我弄清楚 css，我最终会将徽标和菜单放在图像上。

我尝试了在堆栈溢出论坛中找到的许多解决方案，但在我的场景中都没有。

在删除不正确的代码后，我当前的 css 是：-

html=