所以我刚刚完成了我的第一个 JQuery 元素，它是一个简单的全宽 slider 。 (回到 HTML 和 CSS，我目前在 C# 中工作)
问题来了；我不想在页面上滚动，我希望它自动适应网页。
假设我现在打开网页，我想调整它的大小，我希望它的响应速度和它的工作方式非常棒。但您仍然可以向下滚动。 (请随意使用我的代码自己尝试)
我记得这很容易修复，但出于某种原因，我不记得我当时是怎么做到的。我很确定我将不得不改变高度；它在 CSS 文件或 HTML 源代码的主体内。
这是 fiddle
我的 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">〈</span>
<span class="cycle-next">〉</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>
最佳答案
试试这段代码。
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
关于javascript - 网页调整大小自动调整 HTML 简单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34348389/