1

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

我从其他问题/答案中获得了帮助，并尝试了 div 背景和 css - 但它仅将图像与 h 中心对齐。

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

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

4

1 回答 1

1

不确定您是否可以调整图像大小，但您可以选择该background-size属性

.imageContainer {
  background-size:cover;
}

这是我的例子：JSFIDDLE

编辑

在您发表评论后，我终于明白了问题所在。您可以将背景图像垂直居中，这是可行的，但是当页面高度动态变化时，垂直居中不会适应。原因是你的imageContainerdiv 有一个固定的高度，因此它自己的高度不会随着页面的高度而变化。

您可以采取的补救措施是让您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;
}
于 2013-10-25T22:19:29.287 回答