CSS流体图像问题…垂直对齐和图像不在div的顶部开始

Question

JS FIDDLE示例 http://jsfiddle.net/2adv2/

垂直对齐更新

垂直对齐将一直起作用，直到未达到最大宽度为止。 当图像宽度为最大宽度时，如果我调整大小以增加窗口高度，则图像不会移至div的中间，但div会扩大。

我面临2个问题

1. 垂直对齐未发生

2. 当我调整窗口大小时，图像会从div向下移动一点，并且有点溢出-垂直挤压网页。

告诉我为什么会这样。 垂直对齐也行不通。

CSS:

#heroimg {
    position:relative;
    top:0%;
    height:auto;
    vertical-align:middle;
    max-height:100%;
    max-width:100%;

}

#hero {
    position:relative;
    top:0%;
    bottom:40%;
    height:40%;
    text-align:center;
    overflow:hidden;
    background-color:yellow;
}

HTML:
<div id='hero'><img id="heroimg" src="assets/images/dfb.jpg"></div>

Answer 1

恐怕您不能使用vertical-align将容器中的东西垂直居中。

但是，可以将display:table和display:table-cell与vertical-align:middle一起使用，以达到预期的效果。

这需要在要居中的图像周围包裹两个div标签。

下面说明了基本技术：

CSS：

#outer-wrapper {
  display: table;
  width: 100%;
}
#inner-wrapper {
  display: table-cell;
  vertical-align: middle;
}
img {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

HTML：

<div id="outer-wrapper">
  <div id="inner-wrapper">
    <img src="image.jpg">
  </div>
</div>

请参见将这种技术应用于您的示例的小提琴： http : //jsfiddle.net/2adv2/1/

Answer 2

将max-height添加到#hero中，以便div和img一起调整大小

#hero {
    position:relative;
    top:0%;
    bottom:40%;
    max-height:40%;
    text-align:center;
    overflow:hidden;
    background-color:yellow;
}