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

是否可以按文档窗口的百分比定义图像？它嵌套在多个div标记中，因此它将以某种方式定义它相对于窗口的高度%，而不是它的父标记。实际上，像这样的事情

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

---

不使用CSS，但可以使用JavaScript：

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

或者使用jQuery：

---

$（“#yourimageselector”）.height（$（window.height（））

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

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

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

---

这是一个纯CSS3的解决方案，但是它有一些问题。

我找到了最好的解决方案。当我在混音中添加图像时，那篇文章中给出的示例对我不起作用。但是，我增强了它，创建了一个与图像和文本一起工作的“卡片”布局

.course-card-wrapper {
    display: inline-block;
    position: relative;
    width: 50%;
    background-color:silver;
}
.course-card-aspect-ratio {
    padding-top: 150%;
}
.course-card-image {
  width: 100%;
  height:auto;
}
.course-card {
  position:absolute;
  left:10px;
  top:10px;  
  bottom:10px;
  right:10px;
  background-color:white;
  overflow:hidden;
  text-align:center;
  box-shadow: 0 0 10px rgba(0,0,0, 0.2);
}

将课程卡纵横比值调整为所需的倍数

---

这就是工作。

百分比总是相对于父元素，这可以通过JavaScriptSee来完成。或者对于50%…将窗口高度除以2。如何将窗口高度除以2？$（“#yourimageselector”）.height（$（window.height（）/2）；好的，太好了！我对JavaScript有点迟钝。我需要声明一个变量吗？ie这是我在javascript页面开始时写的，加载文件（名为white.jpg）white.height=Math.floor（window.innerHeight/2）@用户962642您可以向图像中添加一个

id

，然后说

document.getElementById（'yourImagesId'）。高度=…