html - 如何使用CSS在可变宽度的图像两侧显示上一个和下一个按钮？

Question

我正在创建一个照片库(使用javascript)，我想在当前照片上显示上一个和下一个按钮。由于我们谈论的是照片库，因此当前显示的照片的宽度不会始终相同。我希望按钮位于照片上方(前面)。用 css 做到这一点的最佳方法是什么？

图像的宽度可变!! 例如。一些将处于横向模式，另一些将处于纵向模式

我尝试用 <a> 显示按钮元素，以及 <img>它们之间。我减少了按钮的边距，以便它们与图像重叠。

html部分:

<div class="col-md-12 cont">
   <a role="button" data-slide="prev" class="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true" style=""></span>
      <span class="sr-only">Previous</span>
   </a>
   <img id="big-one" src="img.jpg" width="auto" height="550px" style="max-width: 100%;"/>
   <a role="button" data-slide="next" class="next">
      <span class="carousel-control-next-icon" aria-hidden="true"style=""></span>
      <span class="sr-only">Next</span>
   </a>             
</div>

CSS部分:

.cont{
   text-align:center;
}
.prev{
   cursor:pointer;
   margin-right:-24px;
   height: 100%;
   z-index: 1;
}
.next{
   cursor:pointer;
   margin-left:-24px;
   height: 100%;
   z-index: 1;
}
.carousel-control-prev-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
   height: 100%;
   background-color:blueviolet; //only for testing
}
.carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
   height: 100%;
   background-color:blueviolet; //only for testing
}
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0,0,0,0);
   white-space: nowrap;
   border: 0;
}

出乎我的意料，上一个按钮位于当前图像的后面。并且图像不保持其垂直位置。我必须解决什么问题才能得到我想要的？

Answer 1

在图像和上一个/下一个元素周围添加一个包装器可以让您居中并控制上一个/下一个按钮在图像上的放置位置。

如果我们在图像周围制作一个仅与图像一样宽的包装器，然后根据该包装器将上一个/下一个按钮设置为绝对定位，无论图像的尺寸如何，它们将始终出现在图像上。

也不确定 <a> 中的两个跨度的意图是什么元素是为了。我认为可以省略一个，如下所示。 <a> s 需要宽度和高度，但您可以将它们更改为您想要的任何值。一些 CSS 也可以组合，但我没有在这里这样做。

.cont{
   display: flex;
}
.image-wrapper {
  margin: auto;
  display: inline-block;
  align-items: center;
  position: relative;
}
.prev,
.next {
   cursor:pointer;
  background-color:blueviolet;
   position: absolute;
   bottom: 0;
    height: 40px;
  width: 80px;
   z-index: 1;
}
.prev {
  left: 0;
}
.next{
  right: 0;
}
.carousel-control-prev-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
#big-one {
  display: block;
}
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0,0,0,0);
   white-space: nowrap;
   border: 0;
}

<div class="col-md-12 cont">
  <div class="image-wrapper">
   <a role="button" data-slide="prev" class="carousel-control-prev-icon prev"><span class="sr-only">Previous</span>
      
   </a>
   <img id="big-one" src="https://picsum.photos/id/237/200/300" width="auto" height="550px" style="max-width: 100%;"/>
   <a role="button" data-slide="next" class="carousel-control-next-icon next"><span class="sr-only">Next</span>
      
   </a>  
  </div>
</div>