change picture size in slideshow in CSS and HTML - html

Question

I am currently making a website and when I view the slideshow its too big is there any way of changing the size of it? I am using HTML and CSS made in visual studio and here is an image of the site 50% zoomed out slideshow
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-opacity-off";
}
.mySlides {
display: none
}
.demo {
cursor: pointer
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="https://cdn.pixabay.com/photo/2018/09/07/17/50/fruit-3661159_960_720.jpg" style="width:100%">
<img class="mySlides" src="https://cdn.pixabay.com/photo/2016/10/11/12/37/piano-keys-1731467_960_720.jpg" style="width:100%">
<img class="mySlides" src="https://cdn.pixabay.com/photo/2017/11/14/18/31/mushroom-2949539_960_720.jpg" style="width:100%">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://cdn.pixabay.com/photo/2018/09/07/17/50/fruit-3661159_960_720.jpg" style="width:100%" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://cdn.pixabay.com/photo/2016/10/11/12/37/piano-keys-1731467_960_720.jpg" style="width:100%" onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://cdn.pixabay.com/photo/2017/11/14/18/31/mushroom-2949539_960_720.jpg" style="width:100%" onclick="currentDiv(3)">
</div>
</div>
</div>

Answer 1

Looking for something like this? I dropped the W3.css Library. This example is on W3schools.com. From my current location I cannot access the photos you posted so I had to use different example photos.
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("demo");
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";
}
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
max-width: 1280px;
margin: 0 auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 33.33%;
padding: 1%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container" >
<div class="mySlides">
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<br>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
</div>
</div>

Answer 2

You can set a fixed height /width for your images however you risk the images becoming skewed. I set a fixed height below, and the images will display within the window, and the thumbs will all be of the same height, however you'd be better off starting with images that are of similar dimensions and using % or vertical height (vh) to size the images smaller as appropriate to what you want.
Hope this helps
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-opacity-off";
}
body {
padding: 0;
width:900px;
max-height:100%;
overflow-y:hidden;
}
.w3-content {
max-width:600px;
max-height: 50vh!important;
margin:0 auto;
}
.mySlides {
display: none;
width: 100%;
height:450px;
}
.demo {
cursor: pointer;
height:150px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<body>
<div class="w3-content">
<img class="mySlides" src="https://cdn.pixabay.com/photo/2018/09/07/17/50/fruit-3661159_960_720.jpg">
<img class="mySlides" src="https://cdn.pixabay.com/photo/2016/10/11/12/37/piano-keys-1731467_960_720.jpg">
<img class="mySlides" src="https://cdn.pixabay.com/photo/2017/11/14/18/31/mushroom-2949539_960_720.jpg">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://cdn.pixabay.com/photo/2018/09/07/17/50/fruit-3661159_960_720.jpg" style="width:100%" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://cdn.pixabay.com/photo/2016/10/11/12/37/piano-keys-1731467_960_720.jpg" style="width:100%" onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://cdn.pixabay.com/photo/2017/11/14/18/31/mushroom-2949539_960_720.jpg" style="width:100%" onclick="currentDiv(3)">
</div>
</div>
</div>
</body>