9

是否可以按文档窗口的百分比定义图像？它嵌套在几个 div 标签中，所以它会以某种方式定义它的 height% 参考窗口，而不是它的父标签。实际上，像这样的东西......

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

4 回答 4

21

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

例如，下面的类将使元素变成视口大小的一半。

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

jsFiddle 演示

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

于 2013-09-14T16:24:55.840 回答
5

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

yourImage.height = Math.floor(window.innerHeight / 2)
于 2013-09-14T16:21:21.073 回答
0

我在这里找到了最好的解决方案。当我将图像添加到组合中时，该文章中给出的示例对我不起作用。但是，我对其进行了增强，创建了一个适用于图像和文本的“卡片”布局。 

.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);
}

将 course-card-aspect-ratio 值调整为您想要的倍数。

这是工作小提琴。

于 2015-07-21T22:03:22.777 回答
-1

或者使用 jQuery：

$("#yourimageselector").height($(window).height());

于 2013-09-14T16:24:15.243 回答