Html 是否可以使父图像与子图像的宽度相同？

我试图使父元素与子图像的宽度相等

它在加载时工作，但如果调整视口高度以强制更改图像高度，则父元素“记住”图像的初始大小并保持该宽度

如果你模仿上面的宽度而不是高度，就没有问题了

以下是这一行为的视频：

这是一个密码笔：

html，正文{高度：100%；}
.包装纸{
显示：内联块；
身高：100%；
边框：1px纯黑；
}
img{
身高：100%；
}

---

您可以通过设置图像的

max width

和

max height

属性来修复它，这样它就不会溢出包装器或窗口。然后可以设置

显示：inline块改为包装器，现在用于替换浮动元素。我将图像设置为
display:block这样它就可以将其显示为块元素，并消除其周围的奇怪空间等


html，正文{高度：100%；}
.包装纸{
显示：内联块；
边框：1px纯黑；
}
img{
显示：块；
最大宽度：100%；
最大高度：100%；
}

谢谢-不幸的是，这没有理想效果，发现它不尊重视口高度：您到底想要实现什么？它是更大界面的一部分，但我试图将其归结为这个特定问题的本质。本质上，还有另一个包装元素，它决定包装和图像的高度。我想要的行为是加载时发生的行为，但是对于它来说，调整大小也是流畅的——我已经更新了画笔：我感觉它可能更容易用JS修复，并且可能与调整大小事件对齐。但是，尽管如此，我还是很好奇为什么它会有这样的行为——这似乎是CSS的一个怪癖。