在任何屏幕上正确呈现单个图像

【问题标题】：Present single image on any screen correctly在任何屏幕上正确呈现单个图像
【发布时间】：2018-09-22 18:46:54
【问题描述】：

我们正在使用 Angular.JS 开发一个网络应用程序，我们需要在智能手机、平板电脑或个人电脑的屏幕上呈现单个图像。我们需要图像在不拉伸图像的情况下利用屏幕的最大尺寸。例如，如果图像宽度远大于图像高度，则图像将使用 100% 的屏幕宽度，并且与此成比例的是图像的高度。目前，我们使用 HTML、CSS 和 Bootstrap。

【问题讨论】：

那么，你尝试了什么？
那么，你想保持img的纵横比吗？

标签： html css image

【解决方案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);           
    });

【讨论】：