图片如何按比例填充窗口？

Question

比如一张宽x高=900x600的图片，窗口宽x高=720x1920，我想让图片按比例填充窗口高度（不用管图片宽度会超出窗口）。

再比如图片宽x高=500x1200，窗口宽x高=1440x1080，这时应按比例填充窗口宽度。

如图：

请问如何实现？

感谢各位大神！现将解决方法整理如下：

法一：（直接用background）

<style type="text/css">
body{
background-image: url(a.jpg);
background-size:auto 100%;
background-position:center 0;
background-repeat:no-repeat;
}
</style>

法二：（用img + transform，推荐）

<style type="text/css">
img{
width: auto;
height: 100%;
margin: 0 auto;
position: relative;
left: 50%;
transform: translate(-50%, 0);
border: none;
top: 0;
}
</style>
<img src="a.jpg"/>

法三：（用img + onload，不推荐，每次需要刷新才能居中）

<style type="text/css">
img{
width: auto;
height: 100%;
margin: 0 auto;
position: relative;
left: 50%;
border: none;
top: 0;
}
</style>
<img src="a.jpg" onload="this.style.marginLeft = (this.width) /-2 + 'px'" />

Answer 1

这是两种情况。

第一种，你的左图，图片高度需要填满整个容器，宽度超出的可以忽略，并且图片水平居中。

    background-size:auto 100%;/*水平方向自适应，垂直方向100%填满*/
    background-size:cover/*等同于上面的写法*/
    
    background-position:center 0;/*水平居中，高度已经填满了不用控制位置了*/

第二种，你的右图，图片宽度填满整个容器，高度超出的忽略，并且图片垂直要居中

    background-size:100% auto;/*水平方向100%填满，垂直方向自适应*/
    background-size:contain/*等同于上面的写法*/
    
    background-position:0 center;/*水平已填满不用控制，垂直方向居中显示*/

如果不用background图片，用img也是一样，水平和垂直方向其中之一100%，另一个自适应，居中就用position控制居中或者用javascript实现。

Answer 2

background-size:cover
background-position:center

Answer 3

同时设置
min-heigt:100%;min-width:100%;

再用css3设置一个垂直居中即可
position: relative;top:50%;transform:translate(0, -50%);

Answer 4

比较典型的object-fit: cover;适用场合，入门可以参考鑫大的这篇半深入理解CSS3 object-position/object-fit属性，如果需要考虑兼容性，请自行去github上搜索object-fit的polyfill（无推荐）。