如何让我的图片在 header 内响应？

Question

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

#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

如何让我的图片在 header 内响应？

How to get my image responsive within the header??

html

css

image

responsive-design