Html 如何使父元素的大小与其子元素的大小相同，而子元素的大小绝对与其祖父母的大小相同？

我有一个祖父母div

。祖父母

，里面有一个图像元素

。子图像

，它绝对是相对于

。祖父母

定位的。我希望包装器元素

.parent wrapper

（包装图像）与子元素

.child image

具有相同的宽度和高度。可能吗？我几乎什么都试过了，但还是想不出来

这是代码笔：

。祖父母{
高度：650px；
最大高度：计算（100vh-100px）；
宽度：642px；
位置：相对位置；
显示：内联块；
浮动：左；
填充：0；
边际：0.25px 0；
背景色：#4646；
文本对齐：居中；
}
.父包装器{
高度：未设置；
最大高度：计算（100vh-300px）；
背景色：红色；
浮动：左；
}
.儿童形象{
显示：块；
保证金：0自动；
最小高度：1px；
高度：自动；
宽度：自动；
最大高度：100%；
最大宽度：100%；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
光标：未设置；
}

---

从子图像中删除绝对位置并将其交给父div，这样父div将具有与子图像相同的位置和大小

.grandparent {
  height: 650px;
  max-height: calc(100vh - 100px);
  width: 642px;
  display: inline-block;
  float: left;
  padding: 0;
  margin: 0 0 25px 0;
  background-color: #464646;
  text-align: center;
  position: relative;
}

.parent-wrapper {
  height: 100;
  max-height: calc(100vh - 300px);
  background-color: red;
  position: absolute;
   height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
   margin: 0 auto;
}

.child-image {
  display: block;
  min-height: 1px;
  cursor: unset;

---

}

从子图像中删除绝对位置并将其交给父div，这样父div将具有与子图像相同的位置和大小

.grandparent {
  height: 650px;
  max-height: calc(100vh - 100px);
  width: 642px;
  display: inline-block;
  float: left;
  padding: 0;
  margin: 0 0 25px 0;
  background-color: #464646;
  text-align: center;
  position: relative;
}

.parent-wrapper {
  height: 100;
  max-height: calc(100vh - 300px);
  background-color: red;
  position: absolute;
   height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
   margin: 0 auto;
}

.child-image {
  display: block;
  min-height: 1px;
  cursor: unset;

---

}我不知道你为什么要把事情弄得这么复杂。我已经改变了一个更简单的形式的代码，希望这是你想要的。如果您需要其他特定的内容，请发表评论

。祖父母{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：650px；
宽度：100%；
边际：0.25px 0；
背景色：#4646；
文本对齐：居中；
}
.父包装器{
显示：内联块；
}
img{
最大宽度：100%；
}

---

我不知道你为什么要把事情弄得这么复杂。我已经改变了一个更简单的形式的代码，希望这是你想要的。如果您需要其他特定的内容，请发表评论

。祖父母{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：650px；
宽度：100%；
边际：0.25px 0；
背景色：#4646；
文本对齐：居中；
}
.父包装器{
显示：内联块；
}
img{
最大宽度：100%；
}

你能解释一下为什么需要绝对定位img吗？@MrLister因为祖父母必须有

高度：650px

所以图像应该始终处于水平和垂直的中心位置。因此绝对定位相对于

。祖父母
div您可以在不使用
位置的情况下进行居中定位：绝对
您可以使用flexbox，但是如果您确实使用绝对定位，并且希望父对象与图像大小相同，为什么不完全定位父对象？这样做的方式似乎真的有问题。事实上-如果与图像大小相同，那么父对象的意义何在？你能解释一下为什么需要绝对定位img吗？@MrLister因为祖父母必须具有
高度：650px
，所以图像应始终处于水平和垂直中心。因此绝对定位相对于
。祖父母
div您可以在不使用
位置的情况下进行居中定位：绝对
您可以使用flexbox，但是如果您确实使用绝对定位，并且希望父对象与图像大小相同，为什么不完全定位父对象？这样做的方式似乎真的有问题。事实上-如果父对象与图像大小相同，那么它的意义何在？