制作图像填充屏幕，而不会影响顶部位置的第二个图像

Question

我正试图在书架（img1）上放一本书（img2），下面的代码是基于窗口定位书而不是书架的位置。我想知道是否有人知道如何根据书架制作书籍位置。现在，这本书正在适当调整大小，但没有正确定位。

<style>
        .bookcontainer {

        }
        .img1 {
            max-width: 100%;
            max-height: 90%;  
            position: absolute;
            margin:auto;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }
        .img2 {
          position:absolute;
          right: 40%;
          top: 15%;
          width: 50%;
          max-width:50%;
        }
</style>

<div class="bookcontainer">
  <img class="img1" src="/assets/shelfbg.png">
  <img class="img2" src="/assets/book.png">
</div>

Answer 1

父容器也必须设置css位置，所以让书架img定义空间，让这本书绝对是这样的：

.bookcontainer {
    position: relative;
}
.img1 {
    width: 100%;
}
.img2 {
    position:absolute;
    right: 40%;
    top: 15%;
    width: 50%;
    max-width:50%;
}

这样，使用百分比，您可以调整相对于其父容器的书籍位置和大小。