如何让我的图像在标题中响应？答案

【问题标题】：How to get my image responsive within the header??如何让我的图像在标题中响应？
【发布时间】：2015-05-18 05:03:41
【问题描述】：

我这辈子都无法得到一个形象来表现我想要的样子。图像应垂直位于父 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>

【问题讨论】：

我不确定垂直对齐是否适用于浮动！

标签： html css image responsive-design

【解决方案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

【讨论】：