登录
当前位置： 首页 > 知识库问答 >
问题：

横向和纵向幻灯片

柴泰平
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>
 类似资料：
  • oracle横向纵向求和代码实例

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

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

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

  • 纵向Table里嵌套横向Table

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

  • 将 PDF 页面从纵向更改为横向

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

  • 如何在轮播中显示纵向和横向图像？

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

  • bootstrap table实现横向合并与纵向合并

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

相关问答

前端 - 横向滚动和纵向滚动能做不同的监听吗？在纵向和横向之间更改操作栏溢出菜单图标自定义相机在保存图像时保留纵向/横向方向CSS如果其他条件，移动纵向或横向[重复]如何在Android中检查图像是纵向还是横向？

相关文章

向引导下拉菜单添加幻灯片效果使用itextpdf的横向和纵向页面的PDF页面大小始终相同使用itextpdf的横向和纵向页面的PDF页面大小始终相同CSS 过渡（纵向）强制“横向”定向模式

相关阅读

Flask重定向和错误Matlab向量Servlet重定向双向链表DFS求有向图(无向图)两点间路径

相关工具

纵向Table里嵌套横向Table横向Scrollview添加图片灯塔双向滚动scrollview多方向切换视图

相关文档

Nutz 烹调向导Python 面向对象C/C++面向 WebAssembly 编程逆向工程入门指南系统学习 PHP 与面向对象
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.