我正在用一组旋转的像素制作一个短的一页网站。不知怎的，js脚本和图像正在破坏网站的缩小能力。我不是一个经验丰富的程序员，所以我有点不知所措。
我很确定这与CSS中的一些固定宽度有关，但删除它们会带来更多的麻烦。如有任何帮助追查原因，我们将不胜感激。这是该问题的Codepen链接。
HTML:
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html" ; charset="utf-8" />
<meta name="created" content="Fri, 22 Jan 2016 17:43:40 GMT" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="jvs_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div class="maingrid">
<div class="slides">
<img src="http://tests.markgarvey.com/slideshow_images/out1.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out2.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out3.png">
<img src="http://tests.markgarvey.com/slideshow_images/out4.png">
<img src="http://tests.markgarvey.com/slideshow_images/out5.png">
<img src="http://tests.markgarvey.com/slideshow_images/out6.png">
<img src="http://tests.markgarvey.com/slideshow_images/out7.png">
<img src="http://tests.markgarvey.com/slideshow_images/out8.png">
<img src="http://tests.markgarvey.com/slideshow_images/out9.png">
<img src="http://tests.markgarvey.com/slideshow_images/out10.png">
</div>
<!-- end of slides div -->
<div class="centertext">
<img src="http://tests.markgarvey.com/images/JVSA_weblogo3.png" width="281" height="106" alt="" title="" border="0" />
<p class="name">FIRSTNAME LASTNAME</p>
<p class="address">1234 Example Street<br> Princeton, New Jersey 12345<br> testing@email.net
<br> 505.422.6563
</p>
<p>Solemnly he came forward and mounted the round gunrest. He faced about and blessed gravely thrice the tower, the surrounding country and the awaking mountains. Then, catching sight of Stephen Dedalus, he bent towards him and made rapid crosses
in the air, gurgling in his throat and shaking his head. Stephen Dedalus, displeased and sleepy, leaned his arms on the top of the staircase and looked coldly at the shaking gurgling face that blessed him, equine in its length, and at the light
untonsured hair, grained and hued like pale oak.
</p>
</div>
<!-- end of centertext div -->
</div>
<!-- end of maingrid div -->
</div>
<!-- end of wrap div -->
<script>
function nextSlide() {
var q = function(sel) {
return document.querySelector(sel);
}
q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>
</body>
</html>
CSS：
#wrap {
max-width: 100%;
width: 1000px;
background: #FFF;
margin: 0 auto;
}
.maingrid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-items: center;
margin-top: 50px;
}
.centertext {
align-self: center;
justify-self: center;
margin-top: 20px;
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
letter-spacing: normal;
line-height: 19px;
padding-bottom: 5px;
font-family: Verdana, Arial, sans-serif;
color: #000000;
font-size: 1em;
line-height: 20px;
}
img {
max-width: 100%;
height: auto;
}
.name {
font-size: 1.5em;
font-weight: bold;
font-variant: small-caps;
margin-bottom: 5px;
}
.address {
margin-top: 8px;
line-height: 24px;
font-family: Arial, sans-serif;
color: #000000;
font-size: 1em;
line-height: 19px;
}
/* the slide container with a fixed size */
.slides {
max-width: 100%;
width: 1000px;
height: 670px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
height: auto;
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
max-width: 100%;
width: 1000px;
margin-bottom: 60px;
}
/* the first image is the current slide. it's faded in. */
.slides img:first-child {
z-index: 2;
/* frontmost */
opacity: 1;
}
/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
z-index: 1;
/* behind current slide */
opacity: 1;
}
谢谢你的帮助。
你的固定宽度(1000px(是罪魁祸首。
尝试：
.slides {
width:100%;
max-width: 1000px;
height: 670px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
height: auto;
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
width:100%;
max-width: 1000px;
margin-bottom:60px;
}
这是一个编辑的代码笔。