HTML5 / CSS - 将大图像放入较小的DIV中

Question

我们如何将大图像放入较小的div中，以h-align / v-align为中心。图像不应该在div之外可见（overflow:hidden种类）。此外，div将根据页面大小更改其大小。

我从其他问题/答案中获得帮助并尝试使用div背景和css - 但它只是将图像与h-center对齐。

jsFiddle - http://jsfiddle.net/yesprasoon/9tLcV/。

如何对齐h-center和v-center？此外，不应该有任何垂直滚动条。它应该适用于任何页面大小和（如果可能）任何图像大小。只能用CSS吗？

Answer 1

不确定您是否可以调整图片大小，但可以使用background-size属性

.imageContainer {
  background-size:cover;
}

以下是我的示例：JSFIDDLE

修改

在您发表评论后，我终于明白了这个问题。您可以垂直居中背景图像，但有效但是当页面高度动态变化时，垂直居中将无法适应。原因是您的imageContainer div具有固定的高度，因此其自身的高度不会随着页面的高度而改变。

您可以采取哪些措施来解决问题，即imageContainer身高100%。但是，您还需要将body / html扩展为100%，否则您的div在没有内容的情况下将没有高度，或者如果您的内容很少，则不会太短。

JsFiddle不能很好地处理body / html样式（可能有一个我不知道的技巧）所以我把我的例子放在codepen上。

<强> HTML

<div class="imageContainer" style="background-image: url('http://www.taiwanholidays.com.au/util/image.jsp?l=791');"></div>

<强> CSS

html,body {
  width:100%;
  height:100%;
  margin:0
}
.imageContainer {
  margin:0; 
  height:100%;
  width:100%;
  overflow:hidden; 
  background-position:center center;
  background-repeat:no-repeat;
}