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

在页面的大约一半处，有一个名为“响应图像”的部分，我相信其中包含您所寻找的示例。

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

1 个答案: