Css 流体图像，垂直对齐（中间），宽度流体DIV内

还有一个关于在div中垂直对齐图像的问题，但我认为我的问题与我在这里发现的其他问题不同。我似乎找不到适合我的情况的解决办法

我有一个100%宽度的DIV（到它的容器，它是向左浮动的，有一个设置的像素宽度）和一个设置的像素高度。我有一个图像里面，我定位绝对，以使其在DIV内的内容背景。图像是流体的宽度为100%

这一切都很好，但我想让图像垂直对齐到容器的中间，高度未知

下面是一些示例代码，显示了我正在尝试的操作：

<div class="container">
  <div class="image-wrapper">
    <img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg" 
       width="100%" />
  </div>
  <p>Some text</p>
</div>

但是花应该在容器分区中显示其中心可见

有什么想法吗？我试图避免任何Javascript大小调整（本示例中未显示的外部容器已经在调整大小）。我不反对更多的div，tables。。不管你有什么

演示此功能的JSFIDLE：

---

为什么不使用背景图像属性？允许垂直居中

---

如果我得到了您需要的，我建议通过css设置背景图像，然后您可以正确设置位置等

.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;

}

---

假设您只想缩小图像的比例，而不想将其拉伸到超出其本机分辨率的范围，这应该可以实现。虽然涉及到一点jQuery，但它是最小的。本质上，这会在window.resize事件上调整IMG的上边距

HTML

jQuery

function adjustImage() {
    $("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}

$(window).load(function() {
    adjustImage();

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

---

snap在2秒前就到了me@DominicGreen是的，我注意到，给了你+1，但由于某些原因，其他人投了反对票-这是一个遗憾，你的例子更简单..你不知道为什么投反对票当人们投反对票时，它很烦人，不评论为什么，但它不允许图像缩放。除非我遗漏了什么？恐怕没有图像缩放-除非你能使用ccs3-ccs3包括背景大小属性…图像宽度是容器的100%，所以它可以缩放。背景图像不会这样做。

<div id="container">
    <img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>

#container {
  margin: auto;
  width: 80%;
  height: 300px;
  border: 1px solid gray;
}

#image {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: auto;
}

function adjustImage() {
    $("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}

$(window).load(function() {
    adjustImage();

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