是否有调整幻灯片中图像大小的功能

Question

我正在为我当地的协会建立一个网站，我们有一些赞助商，我想在幻灯片中显示他们的徽标。自从上次建立网站以来已经有一段时间了，所以我决定先从 w3.css 模板开始，并使用 w3.css 解决方案来制作幻灯片。它当然工作正常。除了徽标的大小和质量不同。现在幻灯片不会调整图像的大小，但我不知道该怎么做。

所以我的幻灯片是这样的：

<div class="slideshow-container w3-half w3-content w3-display-container" id="Slideshow">
  <img class="Slideshow-Sponsors" src="images/Sponsors/ABS.png">
  <img class="Slideshow-Sponsors" src="images/Sponsors/Kirkels.png">
  <img class="Slideshow-Sponsors" src="images/Sponsors/Meneerkes.png">
  <img class="Slideshow-Sponsors" src="images/Sponsors/Dierx.png">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

javascript 是简单的 atm:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("Slideshow-Sponsors");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}

有些图片质量高 (3.404x1.056)，而有些图片质量差 (200x200)。我想只有一种尺寸，放大较小的尺寸并裁剪较大的尺寸。最后我想把看起来更好一点的图像居中

Answer 1

您应该可以在这里找到答案：

W3.css Images Doc

在页面的一半左右有一个名为 "Responsive Images" 的部分，我相信其中有您要查找的示例。

是否有调整幻灯片中图像大小的功能

Is there an function for resizing images in a slideshow

html

css

php

slideshow

w3.css