设置图像高度的问题

Question

所以我想知道是否有办法在不使用JavaScript的情况下将图像的高度设置为其父容器高度的75％？

有什么想法吗？

Answer 1

为容器提供绝对高度，确保height:75%适用于img：

<div>
    <img src="http://placehold.it/100x1"/> <!-- This is a 1px high image -->
</div>

div {
    height:100px; /* Absolute height on container. */
    width:100px;
    background:#f00; /* I've used this to illustrate that the image fills 75%. */
}

img {
    width:100%; /* Force the width to 100% to prevent scaling. */
    height:75%; /* Height percentage declaration. */
}

JSFiddle demo

Answer 2

不，因为这会涉及动态计算，而这不是HTML的目的，而恰恰是javascript的目的。

Answer 3

相对单位必须有一个点来计算，所以在这种情况下，父元素必须有一个设定的高度