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会将滑块固定为居中位置：

class TaskSerializer < ActiveModel::Serializer
  attributes :id, :name, :details, :user_id, :children

  def children
     object.children
  end    
end

在您的原始帖子中，您提到了较大的屏幕，因此我假设您指的是分辨率高于#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

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

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

}

如何使此图片库与屏幕大小成比例？

1 个答案: