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

如果您想使用background-size: cover标记模仿img，可以使用css属性object-fit和值cover来完成此操作。 You can check support here - 注意它是有限的（目前没有MS支持）。

<强> DEMO

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

<强> DEMO

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

对于此特定img，第二种技术是可以接受的，但如果图像大小发生任何变化，则会出现问题，as you can see in this fiddle。

Answer 2

我认为没有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');
}
});

Answer 3

当然是：

使用此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

是否可以在没有javascript的情况下将<img/>用作完整的背景图片？

3 个答案: