Question

我正在开发一个带有Ionic框架的应用程序，我仍然是css的新手。我用计时器创建了一个图像滑块，但它的大小是固定的。但是，我想将其更改为取决于屏幕大小和分辨率。

这是html内容：

<ion-content>
    <div class="container">
        <div id="content-slider">
            <div id="slider">
                <div id="mask">
                    <ul>
                        <li id="first" class="firstanimation">
                            <a href=#><img src="../img/coffe_and_sweet_sale.jpg"/></a>
                            <div class="tooltip"><h1>text 1</h1></div>
                        </li>
                        <li id="second" class="secondanimation">
                            <a href="#"><img src="../img/pizza_sale.png"/></a>
                            <div class="tooltip"><h1>text 2</h1></div>
                        </li>
                        <li id="third" class="thirdanimation">
                            <a href="#"><img src="../img/sandwich_sale.jpg"/></a>
                            <div class="tooltip"><h1>text 3</h1></div>
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </ion-content>

在

中

的style.css

我做了类似的事情：

#slider{
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 680px; 
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
}

#mask{
    overflow: hidden;
    height: 310px;
}

#slider ul{
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li{
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}

#slider img{
    width: 680px;
    height: 320px;
}

所以现在它完美地显示了图像，但它当然不适合任何屏幕。

编辑1

我正在添加滑块动画的样式：

#slider li.firstanimation{
    animation: cycle 24s linear infinite;
}

#slider li.secondanimation{
    animation: cycletwo 24s linear infinite;
}
#slider li.thirdanimation{
    animation: cyclethree 24s linear infinite;
}

@keyframes cycle{
    0% {top: 0px;}
    3.33% {top: 0px;}
    26.64% {top:0px; opacity: 1; z-index: 0;}
    29.97% {top: 325px; opacity: 0; z-index: 0;}
    30.97% {top:-325px; opacity: 0; z-index: 0;}
    93.34% {top:-325px; opacity: 0; z-index: 0;}
    96.67% {top: -325px; opacity: 0; }
    100% {top: 0px; opacity: 1;}
}

@keyframes cycletwo{
    0% {top: -325px; opacity: 0;}
    26.64% {top: -325px; opacity: 0}
    29.97% {top:0px; opacity: 1;}
    33.3% {top: 0px; opacity: 1;}
    59.94% {top: 0px; opacity: 1; z-index: 0;}
    63.27% {top: 325px; opacity: 0; z-index: 0;}
    64.27% {top: -325px; opacity: 0; z-index: -1; }
    100% {top: -325px; opacity: 0; z-index: -1;}
}

@keyframes cyclethree{
    0% {top: -325px; opacity: 0;}
    59.94% {top: -325px; opacity: 0;}
    63.27% {top:0px; opacity: 1;}
    66.6% {top: 0px; opacity: 1;}
    93.24% {top: 0px; opacity: 1;}
    96.57% {top: 325px; opacity: 0; z-index: 0;}
    97.57% {top: -325px; opacity: 0; z-index: -1;}
    100% {top: -325px; opacity: 0; z-index: -1;}
}

#slider .tooltip{
    background: rgba(0,0,0,0.7);
    width: 450px;
    height; 60px;
    position: relative;
    bottom: 85px;
}

#slider .tooltip h1{
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px;
}

#slider .tooltip {
    transition: all 0.3 ease-in-out;
}

Answer 1

更改

#slider img{
  max-width:100%;
  display:block;
  width:100%;
}

删除图像的绝对值。

Answer 2

我为高度添加了一个媒体查询。 Here's如果您想要更改某些内容，请使用mediaquery的链接。

至于滑块我现在在第三张和第一张幻灯片之间修复了问题，有一张空白幻灯片。我不确定它是否符合设计要求。希望你能在必要的时候解决它。

   #slider{
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 80%; 
    max-width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
  }

  #mask{
    overflow: hidden;
    height: 310px;
  }

  #slider ul{
    margin: 0;
    padding: 0;
    height: 320px;
    width: inherit;
    position: relative;
  }

  #slider a{
    width: 100%;
    height: 100%;
  }  

  #slider li{
    width: inherit;
    height: 320px;
    position: absolute;
    top: 100px;
    list-style: none;
  }

  #slider img{
    width: 100%;
    height: 320px;
  }
  #slider li.firstanimation{
    animation: cycle 24s linear infinite;
  }

  #slider li.secondanimation{
    animation: cycletwo 24s linear infinite;
  }
  #slider li.thirdanimation{
    animation: cyclethree 24s linear infinite;
  }

  @keyframes cycle{
    0% {top: 0px;}
    3.33% {top: 0px;}
    26.64% {top:0px; opacity: 1; z-index: 0;}
    29.97% {top: 325px; opacity: 0; z-index: 0;}
    30.97% {top:-325px; opacity: 0; z-index: 0;}
    93.34% {top:-325px; opacity: 0; z-index: 0;}
    96.67% {top: -325px; opacity: 0; }
    100% {top: 0px; opacity: 1;}
  }

  @keyframes cycletwo{
    0% {top: -325px; opacity: 0;}
    26.64% {top: -325px; opacity: 0}
    29.97% {top:0px; opacity: 1;}
    33.3% {top: 0px; opacity: 1;}
    59.94% {top: 0px; opacity: 1; z-index: 0;}
    63.27% {top: 325px; opacity: 0; z-index: 0;}
    64.27% {top: -325px; opacity: 0; z-index: -1; }
    100% {top: -325px; opacity: 0; z-index: -1;}
  }

  @keyframes cyclethree{
    0% {top: -325px; opacity: 0;}
    59.94% {top: -325px; opacity: 0;}
    63.27% {top:0px; opacity: 1;}
    66.6% {top: 0px; opacity: 1;}
    93.24% {top: 0px; opacity: 1;}
    96.57% {top: 325px; opacity: 0; z-index: 0;}
    97.57% {top: -325px; opacity: 0; z-index: -1;}
    100% {top: -325px; opacity: 0; z-index: -1;}
  }

  #slider .tooltip{
    background: rgba(0,0,0,0.7);
    width: 60%;
    height; 60px;
    position: relative;
    bottom: 85px;
  }

  #slider .tooltip h1{
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px;
  }

  #slider .tooltip {
    transition: all 0.3 ease-in-out;
  }

  @media screen and (max-height: 380px){
    #slider{
      height: 200px;
    }

    #mask{
      height:190px;
    }

    #slider img{
      height:190px;
    }

    #slider li{
      height:190px;
    }

    #slider ul{
      height:190px;
    }

    #slider .tooltip{
      bottom: 80px;
    }        
  }

使div屏幕大小依赖

2 个答案: