html - 如何让我的图像在标题中响应？

Question

我这辈子都无法让形象按照我的意愿行事。图像应垂直放置在父 div(页眉)内并具有响应性。我希望整个事情保持比例，但目前还没有发生。有人可以帮忙吗？

#headBar{
	background-color: #88a6cb;
    height: 10%;
    width: 100%;
    position: fixed;
    top: 0px;
    text-align: center;
}


#menubutton{
	height: 70%;
    float: right; 
    padding-right: 5%;
    margin:auto;
    vertical-align: middle;
  
}

<div id="headBar">
		<a href="javascript:ReverseDisplay('dropmen')">
		<img id="menubutton" src="https://lh3.ggpht.com/XkKFmevjtyDntd5e0XeSssV1fukxNFuMvXRpMdXGZ56Ev5WPpggPrPFEi_2AUXFMbd4=w300"/>
		</a>
		</div>

Answer 1

您可以将 top 与 transform 一起使用. top 会将圆定位在其父级高度的 50%，translateY 将相对于自身定位，因此 -50% 的圆高度:

#menubutton{
    height: 70%;
    float: right; 
    padding-right: 5%;
    margin:auto;
    vertical-align: middle;
    position: relative;
    top: 50%;

    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

JSFiddle

备注:http://caniuse.com/#feat=transforms2d