css - 相对于高度的自动宽度+调整窗口大小

Question

我正在构建一个 Web 应用程序，我希望其中的特定元素相对于其父元素进行缩放。据我所知，在不使用 javascript 的情况下实现此目的的唯一方法是使用具有所需宽高比的图像(关于此问题还有其他几篇 Stackoverflow 帖子)，这就是我所做的，所以基本上是这样的:

div { height:20%; display:inline-block; }
div img { height:100%; }

这导致div按我想要的方式缩放，但问题是当浏览器调整大小时，图像的宽度发生变化，但div的宽度没有变化。刷新页面后，元素将再次适当缩放。

我在这里做了一个工作示例:https://jsfiddle.net/r1efuzmb/当您调整浏览器或 Jsfiddle 网站上的“输出”列时，您会看到该问题。

一些注意事项:

• 该问题仅出现在 Chrome 和 IE 中。在 Firefox 和 Safari 中，div 可以正确缩放。
• 我可以使用 vh-units 来设置宽度，但是由于我试图相对于它的父元素而不是视口(viewport)来缩放这个元素，所以它并不是很理想。

有谁知道这是否是浏览器问题和/或是否有解决此问题的方法？

谢谢!

Answer 1

您可以在 before 伪元素上使用 padding-top 以获得与使用图像相同的效果。