这是两种情况。

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

    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实现。

background-size:cover
background-position:center

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

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

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