Question

我的大多数网页都在菜单下方的顶部有一个全宽横幅。它们被创建为带有来自图像精灵文件的背景图像的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/

Answer 1

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

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

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

Answer 2

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

如果您想在此处阅读更多内容，请link

Answer 3

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

万一你不能这样做，我找到了一个与精灵一起工作的解决方案，但你需要javascript（我使用jQuery，但如果你更喜欢普通的JS，那应该很容易实现）。< / p>

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

这是 Fiddle

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

Answer 4

我认为使用原始CSS和一点点黑客是可能的。 Nicolas有一个blog post，他在那里描述了如何实现定义比例的背景图像。

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

编辑：不知道它是否适用于精灵。但也许这是一个帮助：）

使用背景图像缩放div以适合屏幕大小

4 个答案: