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

我在我的标题中有一个标识，我想成为窗口高度的10％。如何给窗口百分比高度的图像

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

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

来源

2013-09-25 user1826795

我不知道，这是一个很好的方式，但在我的CSS我有：

html{ 
    height:100%; 
} 

body{ 
    height:100%; 
}

编辑：所以你的头heigth应该是身体的10％，你的头的图像100％ ....

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

来源

2013-09-25 21:49:59 pbenard

也许你可以设置页眉有10％来自_parent元素的高度（甚至有可能是父是<body>元素）。

然后你让img适合100％的身高。因此，对于像

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

你可能有：

body { 
height: 100%; 
} 

header { 
height: 10%; 
} 

img { 
height: 100%; 
}

只是一个想法，肯定的。如果你仔细想想，你能找到比这个简单的方法在此基础上巧妙的解决方案，但聪明;）

来源

2013-09-25 21:54:52 versvs

你可以用一些jQuery的使它：

$(document).ready(function(){ 

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

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

});

问候提摩太

来源

2013-09-25 22:12:51

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

回答

相关问题