缩放以适应屏幕尺寸？

Question

我是 HTML 的新用户，面临在不同设备上缩放的问题。我在 27 英寸显示器上完成了所有代码，一切都完美契合，但是当我在笔记本电脑屏幕上使用我的网站时（这将是我老师在标记我的网站时的笔记本电脑的粗略屏幕尺寸）时，一切都离开了屏幕。如何使横幅幻灯片在放大时缩小以填充两侧？

24.5-27 英寸显示视图 // 缩放前：

横幅：

图标：

笔记本电脑屏幕 // 缩放后：

横幅：

图标：

横幅 + 图标代码：

/*Tickets Section*/

.pie {
  background-color: #0d0d0d;
}


#tickets {
  flex-direction: column;
  text-align: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 0;
}

#ticketstop .sectiontitle h1{
  font-size: 2rem;
  font-weight: 300;
  color: black;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-align: center;
  opacity: 100;

}
.sectiontitle span{
  color: #347f7d;
}

#tickets .sectiontitle{
  font-size: 2rem;
  font-weight: 300;
  color: white;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-align: center;
  opacity: 100;

}

#tickets .sectiontitle span{
  color: #347f7d;
}

#tickets p {
  text-align: justify;
}

#tickets .ticketsbottom{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  transform: translate(0,-30%);
}

#tickets .ticketsitem {

  flex-basis: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0px;
  border-radius: 10px;

  background-size: cover;
  margin: 10px 6px;
  position: relative;
  z-index: +1;
  transition: .2s;
  box-sizing: border-box;


}

#tickets .ticketsitem::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(60deg, #26323c 0%, #485563 100%);
  opacity: .8;
  z-index: -1;
  border-radius: 10px;
}

#tickets .ticketsbottom .icon{
  height: 80px;
  width: 20px;
  margin-bottom: 25px;
}

#tickets .ticketsbottom .icon img{
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%,-70%);
  width: 350px;
  position: absolute;
}

#tickets .ticketsitem h2{
  font-size: 3rem;
  color: white;
  margin-bottom: 10px;
  text-transform: uppercase;
}

#tickets .ticketsitem p{
  color: white;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.9rem;
  white-space: nowrap;
}



#tickets .ticketsitem:hover{
  position: relative;

  transition: 0.1s;
}

/* END TICKETS Section */
/* Slideshow container */
.slideshow-container {
  max-width: 900px;
  position: relative;
  margin: auto;
  margin-top: 100px;


}



/* Hide the images by default */
.mySlides {
  display: none;
  text-align: center;

}



/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: -500px;
  transform: translate(0,-380%);
  border-radius: 3px 0 0 3px;
}

.prev{
  left: -500px;
  transform: translate(0,-380%);
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  opacity: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  transform: translate(0,-40%);
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.mySlides{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-55%);
  text-align: center;
}

.mySlides img{

}


.slide{
    background-image: url(./back1.png);
    padding:50px;
    padding-top: 115px;
    margin:0 auto;
    margin-top: -200px;

}










.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container .containimage {

      display: flex;
      justify-content: center;
      align-items: center;

      box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
      z-index: +10000;
}

      <div class="text-justify">
        <div class="abovepic">
          <img src="pc.png"/>
        </div>

        <div class="slide">
          <!-- Slideshow container -->
          <div class="slideshow-container">

            <!-- Full-width images with number and caption text -->
            <div class="mySlides fade">
              <div class="numbertext">1 / 3</div>
              <a href="gaming.html"/><img src="easter.png" style="width:200%">
              <div class="text"></div>
            </div>

            <div class="mySlides fade">
              <div class="numbertext">2 / 3</div>
              <a href='#geforce'/><img src="easter.jpg" style="width:200%">
              <div class="text"></div>
            </div>

            <div class="mySlides fade">
              <div class="numbertext">3 / 3</div>
              <a href="gaming.html"/><img src="whiteout.png" style="width:200%">
              <div class="text"></div>
            </div>

            <!-- Next and previous buttons -->
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
          </div>
          <br>

          <!-- The dots/circles -->

          <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
          </div>

  <!--
          <script>
          var slideIndex = 1;
          showSlides(slideIndex);

          function plusSlides(n) {
            showSlides(slideIndex += n);
          }

          function currentSlide(n) {
            showSlides(slideIndex = n);
          }

          function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";
          }
          </script>
  -->

          <script>
          var slideIndex = 0;
          showSlides();

          function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            for (i = 0; i < slides.length; i++) {
              slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {slideIndex = 1}
            for (i = 0; i < dots.length; i++) {
              dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";
            setTimeout(showSlides, 4000); // Change image every 2 seconds
          }
          </script>


        </div>





        <div class="pie">

                      <div class="text2">
                        <h1>HOT BUILDS</h1>
                        <p>Recommended builds with hot prices from our <a href="#music.html" class="website" target="_blank"><b>gaming builds.</b></a></p>
                      </div>

                    <section id="tickets">
                      <div id="tickets container">

                        <div class="ticketsbottom">
                          <div class="ticketsitem" style="background-image: url(./helios2.jpg)">
                            <div class="icon">
                              <img src="helios.png"/>
                            </div>
                            <h2>HELIOS</h2>
                            <p><b style="font-size: 1.8rem">$3355</b><br>- Intel Core i7 10700K 3.8GHz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- WD 500GB SSD OS Drive<br>- ASUS RTX 3070 8GB Graphics<br>- eVGA 750W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>
                          <div class="ticketsitem" style="background-image: url(./coal2.png)">
                            <div class="icon">
                              <img src="hot1.png"/>
                            </div>
                            <h2>COAL</h2>
                            <p><b style="font-size: 1.8rem">$3360</b><br>- Intel Core i7 10700KF 3.8Ghz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 500GB SSD OS Drive<br>- Gigabyte RTX 3070 8GB Graphics<br>- Gigabyte 750W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>
                          <div class="ticketsitem" style="background-image: url(./remix2.png">
                            <div class="icon">
                              <img src="remix.png"/>
                            </div>
                            <h2>REMIX</h2>
                            <p><b style="font-size: 1.8rem">$6270</b><br>- Intel Core i9 10850K 3.6Ghz<br>- 32GB Corsair Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 2TB SSD OS Drive<br>- Gigabyte RTX 3090 24GB Graphics<br>- eVGA 1000W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>
                        </div>
                      </div>
                    </section>
        </div>

作为 HTML 的新用户，幻灯片来自 W3schools