How can I make all the pictures in my slideshow the same size?

Question

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?

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

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

Answer 2

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

add this class

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

How can I make all the pictures in my slideshow the same size?

Question

2 answers

solution1
0 2016-06-23 01:14:00

solution2
0 2016-06-23 01:27:32

How can I make all the pictures in my slideshow the same size?

Question

2 answers

solution1 0 2016-06-23 01:14:00

solution2 0 2016-06-23 01:27:32

solution1
0 2016-06-23 01:14:00

solution2
0 2016-06-23 01:27:32