问题：

横向和纵向幻灯片

柴泰平

2023-03-14

我正在关注w3c学校关于制作幻灯片网页的教程。

对我来说，唯一不同的要求是，我有相同垂直分辨率的横向和纵向图像（1280x720和420x720）。

当我加载肖像图像时，它们的比例会大得多，因为图像仅受最大宽度的限制。实际上，我希望边界是垂直最大高度，所以当我循环通过它们时，高度是恒定的。

问题是，当我在上指定“最大高度”并删除“最大宽度”时。幻灯片容器，然后将图像左对齐放置在页面上。所以看起来我必须有最大高度才能保持中心对齐。

当我定义最大高度和最大宽度时，它将宽度优先于高度。

那么，我如何让幻灯片图像都强制保持一致的高度，同时仍然让所有内容在页面中正确居中绘制呢？

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("dot");
  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";
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img_fjords_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

共有1个答案

漆雕疏珂

2023-03-14

您可以应用以下样式来保持幻灯片高度：

.mySlides {
  position: relative;
  overflow: hidden;
  height: 100vh; /* whatever height you want it to be */
}

.mySlides img {
  /* centre the image */
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

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("dot");
  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";
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

.mySlides {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.mySlides img {
  /* centre the image */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://i.imgur.com/hd6AbVQ.jpg">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="https://i.imgur.com/ZXwfiH2.jpg">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://i.imgur.com/hd6AbVQ.jpg">
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

类似资料：

python实现图片横向和纵向拼接

本文向大家介绍python实现图片横向和纵向拼接，包括了python实现图片横向和纵向拼接的使用技巧和注意事项，需要的朋友参考一下本文实例为大家分享了python实现图片横向和纵向拼接的具体代码，供大家参考，具体内容如下直接上代码：结果：以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
oracle横向纵向求和代码实例

本文向大家介绍oracle横向纵向求和代码实例，包括了oracle横向纵向求和代码实例的使用技巧和注意事项，需要的朋友参考一下有一张工资表SALARY如下, (NO 员工编号，MONEY 工资) NO NAME ITEM MONEY 001 张三工资 80 001 张三补贴 86 001 张
纵向Table里嵌套横向Table

在纵向滚动的UITableView的每一个section里面嵌套横向滚动的UITableView。其中横向滑动的UITableView，是重新建了一个类来重写UITableView，将其旋转90°。适用环境：Xcode 4.5, iOS 5.0 以上。 [Code4App.com]
如何在轮播中显示纵向和横向图像？

我使用Owl Carousel在带有Javascript和jQuery的Carousel中显示图像。我有肖像和风景图片，还有CSS：横向图像遵守宽度的100%限制，全图显示在屏幕上；肖像图像不符合100%的高度限制，图片显示在一个或两个屏幕上，需要向下滚动。我希望纵向图片能够调整大小，并在横向屏幕上完全显示，就像我希望横向图片能够在纵向屏幕上完全显示一样。我用CSS尝试了最大高度和最大宽度的解
将 PDF 页面从纵向更改为横向

给定一个包含纵向页面的现有 PDF 文件，我该如何以编程方式（使用 .NET）处理该文件，以便在横向页面上生成具有相同内容的新文件。新页面应该充分利用可用的横向宽度。页面数量可能会增加，因为现有的纵向页面可能不适合一个横向页面。背景故事:我们使用Google Sheets REST API来生成pdf文档。如果有很多列，文档可能会很宽。不幸的是，Google Drive REST API总是以
bootstrap table实现横向合并与纵向合并

本文向大家介绍bootstrap table实现横向合并与纵向合并，包括了bootstrap table实现横向合并与纵向合并的使用技巧和注意事项，需要的朋友参考一下本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下先上html代码在上js代码实现效果：下面是横向合并，相对来说就比较简单了，只需要对table进行一些设置即可实现效果：以上就是本文的全

横向和纵向幻灯片

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档