Question

我正在用旋转的一组像素在一个简短的一页站点上工作。 js脚本和图像以某种方式破坏了网站的缩小规模。我不是一个经验丰富的编码人员，所以有点不满。

我很确定这与CSS中的某些固定宽度有关，但是删除它们会带来更多麻烦。跟踪原因的任何帮助将不胜感激。这是Codepen link to the problem。

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;
}

感谢您的帮助。

Answer 1

您的固定宽度（1000像素）应该受到指责。

尝试：

.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;
}

这里是 edited codepen 。

响应式缩放不起作用

1 个答案: