Question

我正在制作幻灯片。父容器名为slide，具有以下子元素： prev，next和figure。

我希望父div与子元素的大小相同＆＃39;数字＆＃39;这样，下一个和前一个div就会与“数字”的右侧和左侧对齐。元件。我不希望设置父级的宽度和高度，因为它不会响应。

我不想添加＆＃39; next＆＃39;和＆＃39; prev＆＃39;在“数字”中划分。因为我计划拥有大量的数字元素，并且不希望它重复，在每个数字元素中添加这些div。

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

我希望父级能够响应，并且与子元素的大小相同，其中prev和下一个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%;
}

使父div与子div相同，并将父元素中的其他子元素居中

1 个答案: