缩放与背景图像的DIV，以适应屏幕尺寸

问题描述：

我的大部分网页都有在刚刚菜单下的*全幅横幅。它们创建为具有来自图像精灵文件的背景图像的div，以减少页面加载时间。我的问题是，当屏幕变小时，div不会调整大小，它只是减小div的大小。我想要的是，div始终是100％宽，并且其高度尺寸可以保持背景图像的比例（1300px×300px）。缩放与背景图像的DIV，以适应屏幕尺寸

这里代码和一个的jsfiddle：我添加了一个代码与宽度成比例地调整大小的div

<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的宽度调整大小？ – 2016-03-07 07:52:05

是的。图像sholud总是有相同的比例，并且100％宽。 –

然后，您可以使用最小宽度而不是最大宽度。因此图像始终保持其比例并且100％宽。 – 2016-03-07 07:57:27

答

。但不要认为精灵图像背景将解决您的问题。

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

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

也许你应该在jsfiddle中试试，并告诉我是否解决了这个问题？它没有。 –

对于这一个，你将需要计算背景位置 –

答

您正在寻找你需要将其设置为以cover或contain取决于如果你想让它覆盖div标签或不background-size属性。

如果你想在这里阅读更多的是link

他们都没有工作。 –

也许你应该将精灵分成多个图像。 –

好吧，但为什么大家都告诉我将图像合并为精灵？他们不知道响应式设计吗？ –

答

正如我已经在我的评论说：我建议你刚刚摆脱的精灵，你可以用background-size:cover或background-size:contain解决您的问题。如果你不能这样做，我发现了一个解决方案，可以与精灵一起工作，但是你需要javascript（我使用jQuery，但是如果你更喜欢普通的JS，那应该很容易实现）。

这个想法是，你读了你的banner div的width，并相应地调整它的height和background-position值。

而这里的Fiddle

希望帮助，但再次：这是不是最好的解决方案，这是唯一的解决办法，如果你绝对必须使用精灵！

代码也需要调整大小。编辑你的照片，这样它也可以调整大小。检查https://jsfiddle.net/73sryvfw/2/。我想你需要重新考虑你的背景位置逻辑。 –

是的，添加一个调整大小处理程序太简单了，不能在小提琴中提及。这是每个人都应该能够自己做的事情，而小提琴故意尽可能短。 – mmgross

谢谢。我决定用个人图像替换精灵，现在它工作的很好。 –

答

我认为这是可能与原始CSS和一点点黑客。 Nicolas有一个blog post，他描述了如何实现具有确定比例的背景图像。

我另外一个fiddle让你离开。伪元素中的百分比是通过一些计算构建的：100/(width/height)。

编辑：不知道这是否与精灵的作品。但也许它不过是一个帮助:)

缩放与背景图像的DIV，以适应屏幕尺寸

相关推荐