如何在另一个溢出部分的顶部有第二张图像？

Question

我的numpy内部有一个响应section居中的图片：

＆＃13;

＆＃13;

absolute

＆＃13;

section {
  position: relative;
  background: url(images/passion__shape.png) top center no-repeat;
  background-size: cover;
  height: 100%;
  top: -190px;
}
section > img {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  max-height: 85%;
  width: auto;
}

＆＃13;

＆＃13;

＆＃13;

现在我正在尝试向此<section> <img src="images/img.png"> </section>添加第二个（非常宽的）响应式图像。 新图像的右侧应始终位于现有图像的中心，如下所示：

我无法找到方法，因为如果我使用section或max-width，新图片会缩小并改变位置。

有人能指出我正确的方向吗？

Answer 1

您可以使用transform：

section > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
}

以下是fiddle

希望它解决了！让我知道任何问题。

Answer 2

使用flexbox与align-items:center垂直对齐，+ position与calc()，您可以实现您想要的目标

＆＃13;

＆＃13;

*,
*::before,
*::after {
  box-sizing: border-box
}
body,
html {
  height: 100%;
  margin: 0
}
section {
  position: relative;
  background: url("//dummyimage.com/500x500&text=bg") top center no-repeat;
  background-size: cover;
  height: 100%;
  border: 1px solid red;
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center
}
.small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  max-height: 85%;
  width: auto;
}
.wide {
  position: relative;
  left: calc(-50vw + 50%);
  width: 50%;
  border: 1px green solid
}

＆＃13;

<section>
  <img class="small" src="//lorempixel.com/250/250" />
  <img class="wide" src="//placehold.it/500x250" />
</section>

＆＃13;

＆＃13;

＆＃13;