CSS:如何放大div的子div，并在调整屏幕大小时将两个图像设置为顶部和底部

.parent-div {
  position: relative;
  width: 100%;
  height: 100vh; /* 设置父div的高度为视口的高度 */
}

.child-div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50%; /* 设置子div的宽度为父div的一半 */
  height: 50%; /* 设置子div的高度为父div的一半 */
  transform: scale(2); /* 使用transform属性将子div放大为原来的两倍 */
}

<div class="parent-div">
  <div class="child-div">
    <img src="top-image.jpg" alt="顶部图像" style="position: absolute; top: 0; left: 0; width: 100%;">
    <img src="bottom-image.jpg" alt="底部图像" style="position: absolute; bottom: 0; left: 0; width: 100%;">
  </div>
</div>