html - 设置图像高度的问题

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 .