1

我的标题中有一个标识，我想成为窗口高度的 10%。

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

这将导致我的图像根本不改变大小，我该如何解决这个问题？

4

3 回答 3

0

也许您可以将 Header 设置为距 _parent 元素 10% 的高度（甚至可以将父元素作为<body>元素）。

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

所以对于像

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

你可能有：

body {
height: 100%;
}

header {
height: 10%;
}

img {
height: 100%;
}

只是一个想法，当然。如果您考虑一下，您可以在此基础上找到一个聪明的解决方案，但比这种简单的方法更聪明；）

于 2013-09-25T21:54:52.137 回答
0

你可以用一些jquery来实现：

$(document).ready(function(){

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

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

});

问候提摩太

于 2013-09-25T22:12:51.880 回答
0

我不确定这是一个好方法，但在我的 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>
于 2013-09-25T21:49:59.363 回答