Question

所以我刚刚完成了我的第一个JQuery项目，它是一个简单的全宽度滑块。（回到HTML＆amp; CSS＆amp; im目前正在使用C＃）

这是问题所在;我不希望能够在页面上滚动我希望它自动调整到网页。

让我们说我现在打开网页，我想要调整它的大小我想要它的响应＆amp;它的工作就像一个魅力。但你仍然可以向下滚动。（随意使用我的代码自己尝试）

我记得这很难修复，但由于某种原因，我无法记住我是怎么回事的。我很确定我必须改变高度的东西;它在CSS文件中或HTML源代码体内。

我的CSS文件是完全空的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Width Responsive Image Slider</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
  <style type="text/css">
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;

}
.cycle-prev, .cycle-next {
    font-size: 200;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    z-index: 9999;
    cursor: pointer;

}

.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}


.cycle-pager{
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    position: top;
    bottom: 20px;
    z-index: 9999;
}

.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
    cursor: pointer;

}
.cycle-pager .cycle-pager-active {background: #FFF;}

  </style>
</head>



<body>

<div class="container">

<!-- Full Width Responsive Slider -->

  <div class="cycle-slideshow">
    <span class="cycle-prev">&#9001;</span>
    <span class="cycle-next">&#9002;</span>
    <span class="cycle-pager"></span>
    <img src="images/Untitled.png">
    <img src="images/wp.png">
    <img src="images/wp2.png">
  </div>

<!-- Full Width Responsive Slider -->


</body>
</html>

Answer 1

试试这段代码。

html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}

.container{height:100%;width:100%;overflow: hidden;}
.cycle-slideshow {
    height: 100%;

，其中

*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {

如果你想改变大小，只需改变.container

网页调整自动调整HTML简单

1 个答案: