使用背景图像缩放 div 以适应屏幕大小答案

【问题标题】：Scaling a div with background image to fit screen size使用背景图像缩放 div 以适应屏幕大小
【发布时间】：2016-06-20 16:18:54
【问题描述】：

我的大多数页面在菜单下方的顶部都有一个全宽横幅。它们被创建为带有来自图像精灵文件的背景图像的 div，以减少页面加载时间。我的问题是当屏幕变小时 div 不会调整大小，它只是削减了 div 的大小。我想要的是 div 始终为 100% 宽，并且它的高度缩放以保持背景图像的比例（1300px × 300px）。

这里是代码和一个 jsfiddle：

<div class="entry-content">
  <div class="banner"></div>
</div>

.entry-content {
    max-width: 1300px;
    width: 100%;
    padding: 0 20px 0 20px;
}
.banner {
    margin: 0 -20px 0 -20px;
    max-width: 1300px;
    height: 300px;
    background: url("http://renservice.dk/wp-content/uploads/2016/02/banner-sprites.jpg");
    background-position: 0 -900px;
}

https://jsfiddle.net/fy2zh4vm/1/

【问题讨论】：

您希望图像在调整大小时与横幅 div 的宽度一起调整大小吗？
是的。图像应始终具有相同的比例并且为 100% 宽。
那么，您可以使用 min-width 而不是 max-width。使图像始终保持比例并保持 100% 宽。
好的，但这并不能真正解决我的问题。请注意，div 的高度设置为 300px，但我需要它根据屏幕大小动态缩放，所以我需要删除 height: 300px，但是当我这样做时，div 会塌陷。
@JeppeBech 最好的方法是不要为您的横幅使用精灵。请改用单个图像。并使用background-size:cover 属性。要按比例调整 div 高度，您可以使用我的答案中编写的代码。

标签： html css responsive-design background-image scale

【解决方案1】：

我认为使用原始 CSS 和一些 hack 是可能的。有一个来自 Nicolas 的blog post，他在其中描述了如何实现具有定义比例的背景图像。

我还给你做了一个fiddle。伪元素中的百分比是通过一点计算建立的：100 / ( width / height )。

编辑：不知道它是否适用于精灵。但也许它仍然是一个帮助:)

【讨论】：

【解决方案2】：

您正在寻找 background-size 属性，您必须将其设置为 cover 或 contain 取决于您是否希望它覆盖 div 标记。

如果您想阅读更多内容，请点击link

【讨论】：

也许你应该把精灵分割成多个图像。
好吧，但是为什么每个人都告诉我将图像组合成精灵？他们不知道响应式设计吗？
不知道，但我会使用单张图片。
@JeppeBech 使用 CSS 图像精灵如果您将它们用于网站中的图标和其他小工件，则效果很好。这样您就可以减少服务器请求，从而减少页面加载时间。但是，如果您打算使用精灵图像作为可以调整大小的背景图像，那么最好使用单独的图像。

【解决方案3】：

正如我在评论中已经说过的：我建议你把精灵去掉，你可以用background-size:cover或background-size:contain解决你的问题。

以防万一你不能这样做，我找到了一个适用于精灵的解决方案，但你需要 javascript（我使用 jQuery，但如果你更喜欢纯 JS，那应该很容易实现）。

这个想法是您阅读横幅 div 的 width 并相应地调整其 height 和 background-position 值。

这是Fiddle

希望对您有所帮助，但再次重申：这不是最好的解决方案，这只是您绝对必须使用精灵的解决方案！

【讨论】：

代码也需要调整大小。编辑了您的文件，以便它也可以调整大小。检查jsfiddle.net/73sryvfw/2。我猜你需要重新考虑你的背景位置逻辑。
是的，添加调整大小处理程序太简单了，无法在小提琴中提及。这是每个人都应该能够在小提琴故意尽可能短的情况下自己做的事情。
谢谢。我决定用单个图像替换精灵，现在它工作正常。

【解决方案4】：

我添加了一个代码来按比例调整 div 的大小。但不要认为精灵图像背景会解决您的问题。

这是一个小提琴链接 https://jsfiddle.net/fy2zh4vm/3/

$(window).on('load resize', function(e){
$('.banner').height(parseFloat((300/1300)*$(window).width()));
});

【讨论】：

也许您应该在 jsfiddle 中尝试一下并告诉我这是否可以解决问题？它没有。
对于这个你也需要计算背景位置