在 CSS 和 HTML 中更改幻燈片中的圖片大小

Question

我目前正在制作一個網站，當我查看幻燈片時，它太大了，有什么辦法可以改變它的大小嗎？ 我使用的是在 Visual Studio 中制作的 HTML 和 CSS，這里是網站的圖像 50% 縮小幻燈片

 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

尋找這樣的東西？ 我刪除了 W3.css 庫。 這個例子在W3schools.com 上。 從我當前的位置，我無法訪問您發布的照片​​，因此我不得不使用不同的示例照片。

 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

您可以為圖像設置固定的高度/寬度，但可能會導致圖像傾斜。 我在下面設置了一個固定的高度，圖像將顯示在窗口內，拇指都具有相同的高度，但是你最好從尺寸相似的圖像開始並使用 % 或垂直高度 (vh ) 將圖像縮小到適合您想要的大小。

希望這可以幫助

 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>