无法保持按钮位于图像底部 - 在响应式图库中

Question

我已经制作了一个图片库，而且我现在很长时间以来一直坚持这个问题因为我想在图像底部放置下一个和上一个按钮但是如何让按钮相对图像是不同的和变化的图像。如何将控制器按钮放在图像的底部。

我想做的事情：

1. 它具有全屏幕背景模式。 （完成）
2. 在该模态下，它显示图像。 （完成）
3. 在图像的底部，我想保持一个恒定显示控制器按钮，这些按钮是下一个和上一个按钮，可以通过图像进行更改。 （坚持两天）

立即尝试：

1. 尝试制作相对于div＆＃34;模态内容和图像的按钮＆＃34;但根据宽度大小，我的按钮会移动。

2. 尝试改变div的高度和宽度，并尝试了其他一些事情。

3. 最后没有任何效果。我试图通过媒体查询将按钮从1900px一直定位到400px，从而以不正确的方式实现布局。但它看起来仍然不好看和准确。 （必须仅使用媒体查询。）

4. 我知道这不是正确的方法。我在这里错过了什么？如何在这种情况下使元素响应？

如果我应该尝试任何不同的方法或者如果我的CSS代码出错，请通过您的专业知识告诉我。

＆＃13;
＆＃13;
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");

  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";
}
＆＃13;
.photos-thumbnail {
  width: 440px;
}

.photos-thumbnail img {
  margin: 10px 2px 0 0;
  width: 140px;
  height: 100px;
  cursor: pointer;
}

.view-all-photos:hover {
  opacity: 0.7;
}

.column {
  float: left;
  width: 16.6%;
}

.pro-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  position: relative;
  margin: 50px auto 0;
  width: 100%;
  height: 90%;
  background-color: rgba(0, 0, 0, 0.1);
}

.myslides img {
  object-fit: contain;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
}

.mySlides {
  display: none;
}

.column img {
  width: 100%;
}

.controller {
  position: absolute;
  background: linear-gradient(transparent, #1A1A1A);
  text-align: center;
  height: 12%;
  width: 100%;
  padding-top: 20px;
  margin-top: -110px;
}

.prev,
.next {
  position: absolute;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  border: 1px solid #02BFC1;
  border-radius: 50%;
  width: 33px;
  padding: 15px;
  font-size: 25pt;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  margin-left: 50px;
}

.prev {
  margin-left: -50px;
}
＆＃13;
<div class="photos-thumbnail">
  <img class="hover-shadow" onclick="openModal(); currentSlide(1)" src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
  <img class="hover-shadow" onclick="openModal(); currentSlide(2)" src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
  <img class="hover-shadow" onclick="openModal(); currentSlide(3)" src="http://fextralife.com/wp-content/uploads/2015/01/Far-Cry-4-Tiger.jpg">
</div>

<div id="myModal" class="pro-modal">
  <div class="modal-content">

    <div onkeydown="ff(e)" class="mySlides">
      <img src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
    </div>

    <div onkeydown="ff(e)" class="mySlides">
      <img src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
    </div>

    <div onkeydown="ff(e)" class="mySlides">
      <img src="http://fextralife.com/wp-content/uploads/2015/01/Far-Cry-4-Tiger.jpg">
    </div>

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

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

即使在调整大小时我想要的输出





在浏览器窗口调整大小后会发生这种情况。图像将开始适合窗口并按我的需要缩小，但按钮将静态地位于底部。

Answer 1

如果您将幻灯片的显示更改为：

slides[slideIndex - 1].style.display = "inline-grid";

并且在css上进行了一些额外的更改它应该可以工作。

绿色标记是我的更改。

我插入了一个较小的图像，以便您可以在下面的代码中看到结果。 我希望它有所帮助。

编辑：

要使图像大小调整只是添加到您的CSS：

img{
  max-width: 100%;
  height: auto;
}

如果您希望在调整大小期间按钮保持在中间，只需将controller div放入mySlides div - ＆gt;看我的代码片段

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;

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");

  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 = "inline-grid";
  dots[slideIndex - 1].className += " active";
}

.photos-thumbnail {
  width: 440px;
}

.photos-thumbnail img {
  margin: 10px 2px 0 0;
  width: 140px;
  height: 100px;
  cursor: pointer;
}

.view-all-photos:hover {
  opacity: 0.7;
}

.column {
  float: left;
  width: 16.6%;
}

.pro-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  text-align: center;
  position: relative;
  width: 100%;
  height: 90%;
  background-color: rgba(0, 0, 0, 0.1);
}

.mySlides img {
  padding-left:75px;
  object-fit: contain;
  background-color: rgba(0, 0, 0, 0.1);
}

img{
  max-width: 100%;
  height: auto;
}
.mySlides {
  display: none;
  margin-right:75px;
  margin-top:25px;
}

.column img {
  width: 100%;
}

.controller {
  background: linear-gradient(transparent, #1A1A1A);
  
  height: 100px;
  width: 100%;
  padding-top: 20px;
  margin-top: -100px;
}

.prev,
.next {
text-align: center;
  position: absolute;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  border: 1px solid #02BFC1;
  border-radius: 50%;
  width: 50px;
  padding: 15px;
  font-size: 25pt;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  margin-left: 50px;
}

.prev {
  margin-left: -50px;
}

<div class="photos-thumbnail">
  <img class="hover-shadow" onclick="openModal(); currentSlide(1)" src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
  <img class="hover-shadow" onclick="openModal(); currentSlide(2)" src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
  <img class="hover-shadow" onclick="openModal(); currentSlide(3)" src="http://lorempixel.com/400/200/">
</div>

<div id="myModal" class="pro-modal">
  <div class="modal-content">

    <div onkeydown="ff(e)" class="mySlides">
      <img src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
          <div class="controller">
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="sep">|</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    </div>

    <div onkeydown="ff(e)" class="mySlides">
      <img src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
          <div class="controller">
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="sep">|</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    </div>

    <div onkeydown="ff(e)" class="mySlides">
      <img src="http://lorempixel.com/400/200/">
          <div class="controller">
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="sep">|</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    </div>

  </div>
</div>

Answer 2

您可以添加display: flex，justify-content: (wherever in the image you want your buttons to be)和text-align来固定按钮及其文字的中心位置。

如果这不能帮助你做出请求，请