html - 如何拥有不是背景图片或固定位置的整页 ？

Question

关于如何拥有整页背景图片的信息太多了，但我无法弄清楚如何使用 <img> 实现相同的效果。标签和没有固定的定位。

是的，我已经阅读了关于 full page backgrounds 的 CSS 技巧文章.

在我的图像中，红色边框下方是视口(viewport)。每张图片都是 <article> 的一部分.我想要 background-size: cover 的效果但使用实际的 <img>标签。

示例 HTML:

<article>
  <figure class="bg">
    <img src="http://placehold.it/600x400">
  </figure>
</article>
<article>
  <figure class="bg">
    <img src="http://placehold.it/600x400">
  </figure>
</article>

This CSS tricks technique (technique number 2)有我想要的效果，但它依赖于固定的定位，没有它我无法让它工作:

article {
  min-height: 100%;
}

.bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

.bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

图像也需要在其容器内居中(水平)。

Here's a fiddle using the fixed technique.

Answer 1

啊其实很简单。只需要使用 absolute 而不是 fixed 并让父级 (article) 与隐藏的溢出相对。

article {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bg {
  position: absolute; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  margin: 0;
}
.bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

http://jsfiddle.net/davidpauljunior/NNQ3A/14/