缩放轨道滑块[关闭]答案

【问题标题】：Scaling orbit slider [closed]缩放轨道滑块[关闭]
【发布时间】：2013-06-01 10:45:12
【问题描述】：

我正在开发一个可以在那里找到的网站： http://odesktestanswers2013.com/Metareviewer/

我正在使用 1920 像素宽的显示器，我注意到在我女朋友的笔记本电脑（带有 Safari 的 14 英寸 Mac）上，滑块在滑块的上方和下方显示了两条黑条。

我的滑块图片是 1920 像素，但我认为它们只会缩放（而且我显然不会有那些黑条）。

有人知道这是从哪里来的吗？

【问题讨论】：

【解决方案1】：

问题在于您定义的背景大小值。他们正在使用 % 的容器。如果您将背景大小更改为覆盖并且将背景位置更改为中心中心将解决您的问题

.main-wraper-present2 {
    background: url("../images/unes/une[2].jpg") no-repeat scroll center center #000000;
    background-size: cover;
}

【讨论】：

您应该真正使用一个类来定义所有幻灯片的布局属性。例如，您可以将所有布局样式放在 .main-wraper-present 上，然后在此选择器之后的 html 中添加幻灯片编号
谢谢！这不是一个永久的解决方案，我需要将图像位置传递给一些 PHP 以便改变。但与此同时，我做到了

【解决方案2】：

在您的.main-wraper-present 和.main-wraper-present2 上尝试background-size: cover;。

编辑：浏览器对背景大小的支持最近有所增加，目前最流行的浏览器版本现在都支持该属性，包括 Firefox、Safari、Chrome、Internet Explorer 和 Opera。

【讨论】：