Question

我的标题中有一个标识，我想要达到窗口高度的10％。

<header style="float: left; height: auto; width: 100%;">
<img src="..." style="float: left; height: 10%;" />
</header>

这会导致我的图像根本没有改变尺寸，我该如何解决这个问题呢？

Answer 1

我不确定这是一个好方法，但在我的CSS中我有：

html{
   height:100%;
}

body{
   height:100%;
}

编辑：所以你的标题高度应该是正文的10％，而你的图像是标题的100％....

<header style="float: left; height: 10%; width: 100%;>
     <img src='...' style="float: left; height: 100%;" />
</header>

Answer 2

也许你可以设置Header与_parent元素的高度为10％（甚至可能是父元素是<body>元素）。

然后你让img适合100％的高度。

所以像

这样的东西

<body>
<header>
<img src="" />
</header>
</body>

你可能有：

body {
height: 100%;
}

header {
height: 10%;
}

img {
height: 100%;
}

只是一个想法，当然。如果你考虑一下，你可以找到一个基于此的聪明的解决方案，但比这个简单的方法更聪明;）

Answer 3

你可以使用一些jquery：

$(document).ready(function(){

    logotypeHeight();
    function logotypeHeight() {
        var height = $('window').height();
        $('header img').css('height', (height/100) * 10);
    }

    $(window).resize(function(){
        logotypeHeight();
    });

});

问候Timotheus

如何给窗口的图像百分比高度

3 个答案: