使父 div 与子 div 大小相同，并在父元素中居中附加子元素

Question

我正在制作幻灯片。父容器称为幻灯片，并具有以下子元素： 上一个、下一个和图。

我希望父 div 与子元素“figure”的大小相同，以便下一个和上一个 div 与“figure”元素的左右对齐。我不希望将父级的宽度和高度设置为固定，因为它不会响应。

我不希望在 'figure' 元素中添加 'next' 和 'prev' div，因为我计划有很多图形元素并且不希望它重复，在每个图形元素中添加这些 div .

/* Styles go here */

.slide{
  padding: 0;
  width: 100%;
  display: inline-block;
  margin: 0 auto;
  position: relative;  
}
.slide:before{
    display: block;
    padding-top: 25%;
}

.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, 1);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: 0.9;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
figure{
  width: 100%;
  position: absolute;
  opacity: 0;
  margin:0;
  padding:0;
  transform: scale(0);
  transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
}
img{
  width: 100%;
  height: auto;
  border-radius: 3px;
}
figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: 1em;
  bottom: .35em;
  right: .15em;
  color: #fff;
  background: rgba(0,0,0, .9);
  border-radius: 3px;
  padding: .2em;
}
figcaption a{
  color: #fff;
}
figure.show{
  width: 100%;
  opacity: 1;
  position: absolute;
  transform: scale(1);
  transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
}

<div id='slide' class='slide'>

  <figure id="0" class="show">
    <img src="http://www.naamagazine.com/wp-content/uploads/2016/05/couple-getaways-image-520x400.jpeg">
    <figcaption>Some Text</figcaption>
  </figure>

  <span class="prev">‹</span>
  <span class="next">›</span>

</div>

我只希望父元素具有响应性并且与子元素具有相同的大小，并且将 prev 和 next div 附加到父元素。

Answer 1

按钮实际上已经与容器的边缘对齐 - 问题只是图像没有随之放大。在您的 style.css 中，更改：

img{
  max-width: 100%;

到这里：

img{
  width: 100%;

您应该会看到图像边缘和箭头对齐，并像窗口一样缩放。

至于让箭头垂直居中 - 除非您在 .slide 元素上设置高度，否则这可能会很棘手。只要您知道幻灯片中图像的纵横比，这仍然可以响应。这是使用底部填充的技巧 - 根据您想要的纵横比设置它。然后将您的图像设置为width: 100%; height: 100%; position: relative;，只要比例正确，它们都应该合适。

figure {
  position: absolute;
  width: 100%;
  height: 0;

  /* This will make a box that's always twice as wide as it is tall */
  padding-bottom: 50%;

  /* This one's twice as tall as it is wide */
  padding-bottom: 200%;
}