是否可以使用 <img> 作为没有 javascript 的完整背景图像？

Question

当我将图像用作 background-image 和 cover 属性时，我得到了比例完美的全屏图像。是否可以使用 img，而不使用 javascript 获得相同的结果？

我想创建一个视差背景。当用户滚动图片下方的内容时，会滑过图片。

问题出在图像的大小上，我添加了 width: 100%，但它与 background-size: cover 一样不起作用。我应该增加宽度吗？最佳做法是什么？

$(document).ready(function(){
 
    function contentHeight() {
     var wheight = $(window).height();
        $('#content').css({
         'margin-top' : wheight
        });
    }
    
    contentHeight();
    
    $(window).resize(function(){
     contentHeight();
    });
});

html, body {
    margin: 0;
}

#image {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#image img {
    width: 100%;
}

#content {
    background: #ccc;
    position: relative;
    z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="image"><img src="http://www.planwallpaper.com/static/images/canberra_hero_image.jpg"></div>
<div id="content">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

Answer 1

当然是：

使用这个CSS

html, body {
    margin: 0;
    overflow-x:hidden;
}

#image {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#image img {

    height:100%;
    width:auto;
}

Fiddle

Answer 2

如果您想用 img 标签模拟 background-size: cover，您可以使用 css 属性 object-fit 和值 cover。 You can check support here - 注意它是有限的（目前不支持 MS）。

DEMO

您可以用纯 css 模拟 background-size: cover，只需将 img height 和 width 设置为 auto；这将保留 img 的纵横比。但它不会使 img 完美居中，因此一个简单的解决方法是添加一些规则以确保它位于 parent 容器的中间；确保 parent 有 overflow: auto.

DEMO

您可以在此处查看 background-size: cover 与第二种技术之间的比较：COMPARISON

对于这个特定的 img 第二种技术是可以接受的，但是一旦图像大小发生任何程度的变化，就会出现问题，as you can see in this fiddle。

Answer 3

我相信没有 JS 的唯一跨浏览器替代方案是内联 svg 并使用 <image> :

Example

<svg viewbox="0 0 800 531" preserveAspectRatio="xMidYMid slice">
 <image xlink:href="/path/image.jpg" width="800" height="531"/>
</svg>

svg {
width: 100%;
height: 100vh;
}

svg 可以指定任何尺寸，但 viewbox 和 <image> 的原始尺寸必须定义。

诀窍在于 preserveAspectRatio 属性：

Mozilla documentation

我还使用常规图像的纵横比和一些变换为此编写了一个小脚本：

Demo

<div id="wrap">
 <img id="layer" src="/path/image.jpg" alt="">
</div>

#wrap {
  overflow: hidden;
}

#wrap img {
  position: relative;
}

.wide {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.tall {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

$(function() {

var parent = $('#wrap'),
tableau = $('#layer'),
proportion = 800/531; // aspect ratio of the image

$(window).on('load resize', coverSpace);

function coverSpace() {

    var range = parent.width(),
    term = parent.height(),
    broad = term*proportion,
    aerial = range/proportion;

    if (range/term >= proportion) tableau.css({width: '100%', height: aerial}).attr('class', 'wide');
    else tableau.css({width: broad, height: term}).attr('class', 'tall');
}
});

是否可以使用 <img> 作为没有 javascript 的完整背景图像？

Is it possible to use <img> as a full background image without javascript?

jquery

html

css

parallax