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>需要宽度和高度，但是您可以将它们更改为所需的宽度。一些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>

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

1 个答案: