如何在幻灯片中制作相同尺寸的所有图片？

Link

I'm trying to make a slideshow and I just copied and pasted this from w3schools.com. It worked, but the buttons disappeared and the pictures are all completely different sizes. Even if I do width:__ and stuff, it doesn't get fixed... Can somebody help me with this?

我正在尝试制作幻灯片,我只是从w3schools.com复制并粘贴了这个。它工作,但按钮消失,图片都是完全不同的大小。即使我做宽度:__和东西,它也没有得到修复......有人可以帮助我吗?

(edit: applied code from the source)

(编辑:来自源的应用代码)

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

html {
  background-color: white;
}
table {
  layout: fixed;
  width: 100%;
  align-content: center;
  background-color: #00FFFA;
}
td {
  width: 10%;
  text-align: center;
  color: black;
  text-decoration: none;
  -webkit-transition-duration: 0.2s;
}
a {
  text-decoration: none;
}
td:hover {
  background-color: white;
  -webkit-transition-duration: 0.2s;
}
td:active {
  background-color: #00F6FF;
  color: white;
}
h1 {
  color: black;
  text-align: center;
}
.red {
  width: 100%;
  height: 12.5%;
  background-color: red;
}
a:link {
  color: black;
}
a:visited {
  color: black;
}
a:hover {
  color: black;
}
a:active {
  color: black;
}
/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  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;
}
/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* 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;
}
/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.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
  }
}
iframe {
  float: left;
  margin: 10px;
}
.mySlides img {
  width: 100%;
  height: 500px;
}

<!DOCTYPE html>
<html>

<head>
  <title>
    Japon
  </title>
</head>

<body>
  <table>
    <tr>
      <td><a href="#Japon">Accueil</a>
      </td>

      <td><a href="#Population">Population</a>
      </td>

      <td><a href="#Climat">Climat</a>
      </td>

      <td><a href="#Tourisme">Tourism<a></td>
            
        <td><a href="#Histoire">Histoire</a>
      </td>

      <td><a href="#Gouvernement">Gouvernement</a>
      </td>

      <td><a href="#Technologie">Technologie</a>
      </td>

      <td><a href="#Culture">Culture</td>
            
          <td><a href="#Opinion">Opinion</td>
            
          <td><a href="#Durabilite">Durabilite</td>
        </tr>
      </table>
        
    <h1 id="Japon">Japon</h1>
      
      <div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 10</div>
    <img src="http://us.jnto.go.jp/heritage/images/main_heritage.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 10</div>
    <img src="http://www.officeholidays.com/images/slider/japan_03.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 10</div>
    <img src="http://www.binglebogfacts.com/wp-content/uploads/2016/03/The-Worlds-Oldest-Company-operated-in-Japan-from-578-AD-to-2006..jpg" style="width:100%">
    
 <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <br>

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

        <hr>

        <h1 id="Population">Population</h1>

        <iframe width="600" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1WPkIPZqfM55PKyvaKmK9_PD-agxjKyMRQY8BtFFXeEk/pubchart?oid=1784900695&amp;format=interactive"></iframe>
        <p>La Japon a un de les plus grande populations dans le monde, avec 121,000,000 personnes. Ca c'est dixieme, mais seulement 38eme dans densite de population. L'image au gauche est un charte de population par les ages. Les personnes plus jeunne son't
          dans la bas de la charte et les plus vieux son't dans la haut. La population de Japon decline un peut, et experts pense que la population vas etre reduire a un demi par 2082.</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

        <hr>

        <h1 id="Climat">Climat</h1>

        <hr>

        <h1 id="Tourisme">Tourisme</h1>

        <hr>

        <h1 id="Histoire">Histoire</h1>

        <hr>

        <h1 id="Gouvernement">Gouvernement</h1>

        <hr>

        <h1 id="Technologie">Technologie</h1>

        <hr>

        <h1 id="Culture">Culture</h1>

        <hr>

        <h1 id="Opinion">Opinion</h1>

        <hr>

        <h1 id="Durabilite">Durabilite</h1>

2 个解决方案

#1

The problem is the images aren't the same aspect ratio. You probably want to just restrict the height. This will make the site less jumpy as you change between each image. Realistically, the best way to deal with this is to crop the images to the same size. You can do this with a simple image editing tool such as Paint on Windows or Gimp.

问题是图像的长宽比不一样。您可能只想限制高度。当您在每个图像之间切换时,这将使网站不那么跳跃。实际上,处理此问题的最佳方法是将图像裁剪为相同的大小。您可以使用简单的图像编辑工具(如Windows上的Paint或Gimp)执行此操作。

#2

Hi please check this for refrence https://plnkr.co/edit/Fbn9OFn5czK6XlHi6hQH?p=preview

嗨,请检查这个参考https://plnkr.co/edit/Fbn9OFn5czK6XlHi6hQH?p=preview

add this class

添加这个类

.mySlides img
{
  width:100%;
  height:200px;
}

#1

#2