个人中心
gpt4 book ai didi

javascript - 响应缩放不起作用

转载 作者：行者123 更新时间：2023-11-30 11:16:04 24 4
gpt4 key购买 nike

我正在制作一个简短的单页网站，其中包含一组旋转的像素。 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;
}

感谢您的帮助。

最佳答案

你的固定宽度(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;
}

这是一个 edited codepen .

关于javascript - 响应缩放不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51478027/

24 4 0
文章推荐： javascript - 有没有特殊的字符来防止ASI
文章推荐： javascript - 将映射变量放入图像的源中
文章推荐： javascript - 如何使用带有变量的javascript访问对象数组
文章推荐： javascript - 具有不可变状态的循环内的对象更新
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com