HTML元素的大小相对于屏幕而不是父级

Question

目前我正在试图弄清楚是否有办法使用百分比设置相对于屏幕大小的html元素的大小而不是其父元素的大小。我想这样做是为了在我的网站上创建图像大小的一致性。

我想使用百分比来确保我的图片可以根据浏览器大小调整的变化进行适当调整。

例如，如果我将图像的宽度设置为“width：60％;”我希望我的图像占据屏幕空间的60％，而不是它嵌套的div的60％。

有没有办法实现这个目标？

Answer 1

是的：您可以使用vw和vh单位。这些表示视口的百分比（=浏览器窗口，但在全屏模式下，在移动设备上，这等于屏幕大小）宽度和高度。