正确显示任何屏幕上的单个图像

Question

我们正在使用Angular.JS开发一个webapp，我们需要在智能手机，平板电脑或个人电脑的屏幕上呈现单个图像。我们需要图像来展示屏幕的最大尺寸而不拉伸图像。例如，如果图像宽度远大于智能手机上的图像高度，则图像将使用屏幕宽度的100％，并且与图像的高度成比例。目前，我们使用HTML，CSS和Bootstrap。

Answer 1

首先，你必须测量窗户的宽度和高度。

这是我一直做的事情。

<强> HTML：

<div class="mybg">&nbsp;</div>

<强>样式：

*{margin:0;padding:0;}
.mybg{background: url(http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg) no-repeat center center;background-size: cover;}

<强> jQuery的：

$(window).load(function(){
        var w,h;
        w = $(window).width();
        h = $(window).height();
        $('.mybg').width(w); 
        $('.mybg').height(h);           
    });