将图像大小调整为html窗口的百分比

Question

是否可以按文档窗口的百分比定义图像？它嵌套在几个div标签中,因此它将以某种方式定义其引用窗口的高度%,而不是其父标签.实际上,这样的事......

<img src="image.jpg"  height="50% of window"/>

Answer 1

您可以使用视口的高度和宽度.

例如,以下类将使元素的大小为视口的一半.

.size {
    width: 50vw;
    height: 50vh;
}

这是一个纯CSS3解决方案,但它有一些浏览器支持问题.

Answer 2

不是用CSS,但你可以使用JavaScript:

yourImage.height = Math.floor(window.innerHeight / 2)