时间戳

首页 > 解决方案 > 在 CSS 和 HTML 中更改幻灯片中的图片大小

html - 在 CSS 和 HTML 中更改幻灯片中的图片大小

问题描述

我目前正在制作一个网站，当我查看幻灯片时它太大了，有什么办法可以改变它的大小吗？我正在使用在 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>

标签： htmlcssslideshowphoto

解决方案

您可以为图像设置固定的高度/宽度，但您可能会冒着图像歪斜的风险。我在下面设置了一个固定的高度，图像将显示在窗口中，并且拇指都将具有相同的高度，但是你最好从尺寸相似的图像开始并使用 % 或垂直高度（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>

推荐阅读