如何使此图片库与屏幕尺寸成比例？

Question

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

---

所以在我修复了我的代码后，我的上一个和下一个箭头不会出现。有人可以看看代码吗？谢谢！！！ html

<div id="wrap">
    <div id="container">
      <div class="controller" id="prev"></div>
      <div id="slider">
       <img src="ps mock ups/collections/SS1.jpg" width="990" height="554"     alt=""/> 
       <img src="ps mock ups/collections/SS2" alt="" width="990" height="554"/> 
       <img src="ps mock ups/collections/SS3.jpg" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS4.jpg" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS5.jpg" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS6.jpg" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS7.jpg" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS8" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS9.jpg" alt="" width="990" height="554"/> 
       <img src="ps mock ups/collections/SS10.jpg" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS11" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS12.jpg" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS13" alt="" width="990" height="554"/>
       <img src="ps mock ups/collections/SS14.jpg" alt="" width="990" height="554"/></div>
<div class="controller" id="next"></div>
    </div>
      </div>

#wrap {

    height: 554px;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-right: auto;
    margin-top: 40px;
}
#prev {
    background-image: url(ps%20mock%20ups/bg/left%20arrow/_.png);
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    height: 554px;
    width: 75px;
    position: relative;
    z-index: 10;
    float: left;
    margin-left: 3%;
    background-attachment: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
    background-size: 40% auto;
    margin-right: 0px;
}
    #next {
    background-image: url(ps%20mock%20ups/bg/left%20arrow/_%20copy.png);
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 75px;
    height: 554px;
    float: right;
    position: relative;
    z-index: 10;
    overflow-x: hidden;
    overflow-y: hidden;
    background-size: 40% auto;
    margin-right: 16px;
    margin-top: -554px;
}
    #slider {
    display: block;
    position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 990px;
    height: 554px;
}
    #container {
    width: 1190px;
    height: 554px;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0 auto;
    text-align: center;
    padding:0;
}

Answer 1

以下 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 像素，则在该查询中插入要运行的所有内容。例如

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