Question

我有一个模态图像，当点击打开幻灯片时，使用prev和下一个按钮，这些按钮在幻灯片放映的顶部中间对齐。当图像比幻灯片容器长时，幻灯片显示会变长，而不是图像变小以适合幻灯片容器（但保持居中）。

我想要它，以便容器始终保持相同的大小，如果图像更短，那么我宁愿它居中而不是像现在一样向上移动。（基本上我希望下一个，前一个按钮始终处于相同的位置，并且在图像的中间）。我已经坚持了一段时间，并且我尝试了一些东西，但似乎都没有。

注意：1200x800图像是我喜欢它的标准，第一张照片是一个太短的例子，最后一个例子太长了。

这是[JSFIDDLE] [1]

HTML：

logIn(body): Observable<any>{
return this._http.post('http://localhost:3000/api/login', body)
  .do(data => console.log('Login: ' + JSON.stringify(data)))
}

CSS：

<body>

  <h2 style="text-align:center">Modal Albums</h2>

  <div class="row">
    <div class="column">
      <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
    </div>
  </div>

  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">

      <div class="mySlides">
        <div class="numbertext">1 / 4</div>
        <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">2 / 4</div>
        <img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">3 / 4</div>
        <img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">4 / 4</div>
        <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" style="width:100%">
      </div>

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

    </div>
  </div>

JS：

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

 * {
   box-sizing: border-box;
 }

 .row > .column {
   padding: 0 8px;
 }

 .row:after {
   content: "";
   display: table;
   clear: both;
 }

 .column {
   float: left;
   width: 25%;
 }
 /* The Modal (background) */

 .modal {
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background: rgba(0, 0, 0, 0.9);
 }
 /* Modal Content */

 .modal-content {
   position: relative;
   background-color: rgba(0, 0, 0, 0.9);
   margin: auto;
   padding: 0;
   width: 90%;
   max-width: 1200px;
 }
 /* The Close Button */

 .close {
   color: white;
   position: absolute;
   top: 10px;
   right: 25px;
   font-size: 35px;
   font-weight: bold;
 }

 .close:hover,
 .close:focus {
   color: #999;
   text-decoration: none;
   cursor: pointer;
 }

 .mySlides {
   display: none;
 }

 .cursor {
   cursor: pointer
 }
 /* Next & previous buttons */

 .prev,
 .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   margin-top: -50px;
   color: white;
   font-weight: bold;
   font-size: 20px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
   -webkit-user-select: none;
 }
 /* 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);
   text-decoration: none;
 }
 /* Number text (1/3 etc) */

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

 img {
   margin-bottom: -4px;
 }

 t img.hover-shadow {
   transition: all .2s ease-in-out;
 }

 .hover-shadow:hover {
   transform: scale(1.1);
 }

 .modal-content {
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
 }

 @-webkit-keyframes zoom {
   from {
     -webkit-transform: scale(0)
   }
   to {
     -webkit-transform: scale(1)
   }
 }

 @keyframes zoom {
   from {
     transform: scale(0)
   }
   to {
     transform: scale(1)
   }
 }

编辑：

！[我希望它看起来像]：https://imgur.com/a/jtmmM 阴影部分是实际图像，我绘制的框是容器（其中ofc实际上在页面上不可见）

Answer 1

如果您添加以下CSS，这应该可以解决您的问题。我不确定我到底想要如何扩展。

发表评论后，我发现了post，可能有助于您使用object-fit

在这种情况下，您需要为容器定义一个高度，我将其设置为200px，但您可以选择最适合您的容器。

.mySlides {
  text-align: center;
  height: 200px;
}
.mySlides img {
  width: 100%;
  max-height:100%;
  object-fit: contain;
}

jsfiddle

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

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("demo");
  var captionText = document.getElementById("caption");
  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";
  //captionText.innerHTML = dots[slideIndex - 1].alt;
}

body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row>.column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}


/* The Modal (background) */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.9);
}


/* Modal Content */

.modal-content {
  position: relative;
  background-color: rgba(0, 0, 0, 0.9);
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}


/* The Close Button */

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


/* 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);
  text-decoration: none;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

t img.hover-shadow {
  transition: all .2s ease-in-out;
}

.hover-shadow:hover {
  transform: scale(1.1);
}

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
.mySlides {
  text-align: center;
  height: 200px;
}
.mySlides img {
  width: 100%;
  max-height:100%;
  object-fit: contain;
}

<h2 style="text-align:center">Modal Albums</h2>
<span ></span>
<div class="row">
  <div class="column">
    <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal" class="modal ">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content ">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" >
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" >
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" >
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" >
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

  </div>
</div>

Answer 2

将您的img样式更改为（style =“ width：1900px; height：970px” align =“ middle”）

示例

<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg"  style ="width:1900px;height:970px" align="middle" >
</div>

您还需要在CSS中进行一些更改。

Answer 3

在您的HTML文件中更改此内容，

    <div class="mySlides">
    <div class="numbertext">1 / 4</div>
    <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg"  style ="width:1900px;height:970px" align="middle" >
    </div>

将幻灯片显示图像限制为幻灯片容器的高度/宽度？

3 个答案: