Html Chrome不应重新计算元素宽度

我需要根据元素的高度调整其宽度，并认为我已经使用透明

img

技巧得出了一个非常聪明的解决方案：

粉红色div以1:2的比例正确渲染；但是，它应该在视口调整大小时调整大小（因为它的高度为100vh元素的100%），但它没有

---

如果调整视口的大小，

img

元素会随着视口高度的增加而增加宽度，但是

容器

元素不会增加宽度以容纳它，这违反了

显示：内联块

的含义规则（如果在Chrome控制台中选中并取消选中

.container

上的显示样式，它将正确调整大小以适合其子内容）。我假设问题是元素维度的计算是父子关系，因此当

img

元素调整大小时，Chrome不会重新计算其父维度。有没有办法欺骗它这样做？

Chrome会最小化重放周期。这通常是好的

我建议在图像本身上设置

高度：50vh

，并在.container上使用

宽度：max content；

，而不是

.viewport

见：

一般来说，关于vh装置：