Question

有关如何获得整页背景图片的大量信息，但我无法解决如何使用<img>标记实现相同效果和无固定定位< /强>

是的，我已阅读full page backgrounds上的CSS技巧文章。

在我的图片下方，红色边框是视口。每张图片都是<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

Could something like this be what you're looking for or am I way off?

article {
    display: block;
    position: relative;
}

article img {
    position:absolute;
    top:0;
    left:0;
    z-index: -1;
    margin: auto;
    width: 100%;
    height: 100%;
}

Answer 2

啊其实很简单。只需使用绝对而不是固定，并使父（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/

Answer 3

这是一个开始我认为......实际上这不是你想要的吗？

有一个小提琴 - Fiddle Link!

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>

CSS

/* Borrowed from CSS reset */

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
        font-family: Helvetica;
}    




html, body {
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

article {
    width:100%;
    height: 100%;
    position: relative;
}

figure img {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100%;
    padding: 0;
}

jQuery - 也可以增强with something like this以将视口捕捉到每个图像。

Answer 4

body,*{
     padding:0 !important;
     margin:0 !important;
  }
  article{
     position:absolute;
     left:0;
     right:0;
   }
  .bg {
      position:relative;
   }

   .bg img {
   width:100%;
   height:100%;
    }
    // your test this code

如何使整页<img/>不是背景图像或固定位置？

4 个答案: