Jquery 如何保持此图片库与屏幕大小成比例？

正如您在图片库中看到的，当您放大屏幕时，我使用JQuery创建的图片库保持在相同的位置。它在我的屏幕大小上运行良好，但在更大的屏幕大小上它不会移动

---

因此，在我修复代码后，我的上一个和下一个箭头不会显示。有人能看一下密码吗？非常感谢。 html

#包裹{
高度：554px；
溢出x：隐藏；
溢出y：隐藏；
右边距：自动；
边缘顶端：40px；
}
#上{
背景图像：url（ps%20mock%20ups/bg/left%20arrow/u2; u2;.png）；
背景位置：中心；
背景重复：无重复；
显示：块；
高度：554px；
宽度：75px；
位置：相对位置；
z指数：10；
浮动：左；
左缘：3%；
背景附件：滚动条；
溢出x：隐藏；
溢出y：隐藏；
背景尺寸：40%自动；
右边距：0px；
}
#下一个{
背景图像：url（ps%20mock%20ups/bg/left%20arrow/uwk%20copy.png）；
背景位置：中心；
背景重复：无重复；
显示：块；
宽度：75px；
高度：554px；
浮动：对；
位置：相对位置；
z指数：10；
溢出x：隐藏；
溢出y：隐藏；
背景尺寸：40%自动；
右边距：16px；
利润上限：-554px；
}
#滑块{
显示：块；
位置：绝对位置；
溢出x：隐藏；
溢出y：隐藏；
宽度：990px；
高度：554px；
}
#容器{
宽度：1190px；
高度：554px；
显示：块；
溢出x：隐藏；
溢出y：隐藏；
保证金：0自动；
文本对齐：居中；
填充：0；
}

以下CSS将滑块固定到中心：

#wrap {
  height: 554px;
  margin-top: 40px;
  overflow-x: hidden;
  overflow-y: hidden;
}

#container {
  height: 554px;
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  margin: 0 auto;
  text-align: center;
  padding: 0;
}

#slider {
  display: block;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 990px;
  height: 554px;
}

在您的原始帖子中，您提到了更大的屏幕，因此我假设您指的是分辨率高于

1366x768

的屏幕，因此，您的媒体查询应该如下所示：

@media screen and (min-width: 1366px) {

}

如果屏幕宽度超过1366像素，则在该查询中插入要运行的所有内容。e、 g

@media screen and (min-width: 1366px) {
    #slider {
      display: block;
      position: absolute;
      overflow-x: hidden;
      overflow-y: hidden;
      width: 1366px;
      height: 554px;
    }
}

---

您是否可以创建一个jsfidlde.Down，因为您只发布了指向外部网页的链接，而不是JSFIDLE或任何其他方式来仔细查看问题所在。昨天不知道缩进，所以不知道如何添加代码。。现在在这里……嘿！非常感谢！它确实使滑块居中，但它仍然不根据scrn大小调整大小？如果水平拖动浏览器，您将看到大小保持不变。。。对此有什么见解吗？当然，您需要使用CSS媒体查询来说明scren的大小：-或者，您可以通过

%

而不是

像素来设置宽度和高度，然后看看结果如何。无论如何，我建议使用OwlCarousel，这是一个非常棒的滑块插件。如果这回答了你的问题，请接受并投票赞成。谢谢，谢谢！阅读此内容，不确定如何进行媒体查询。。。你能给我列出一个基本格式吗？很抱歉我是一名时装设计师，甚至连电脑都不是。如果你不是电脑爱好者，你为什么要做这种工作。我已经用一些媒体查询代码修改了我的答案。对于没有平面设计师的时装设计师来说，这很可悲，不是吗。。。。谢谢你的解决方案！然而，我想我的下一个和上一个箭头已经消失后，我格式化它根据您的代码？我更新了dreamweaver的代码。请帮我也看看那些？图特
@media screen and (min-width: 1366px) {
    #slider {
      display: block;
      position: absolute;
      overflow-x: hidden;
      overflow-y: hidden;
      width: 1366px;
      height: 554px;
    }
}