css 将背景图片居中显示，并且显示全，不拉伸的效果实现，图片设置宽度，高度自适应，并且显示全。

1、背景自适应的css：

.bg-tns {
    background-image: url('img/xxx.jpg');
    background-size: cover;
    background-position: center; /* 将图片居中显示 */
    min-height: calc(100vh-100px); /* 确保至少为视口高度 */
  }

这个布局是这样的：

这里的背景图的高度，是100vh - 100px（logo)高度。

2、图片适应，并且根据宽度，自动缩放：

.logo{
  width: 250px;  //根据图片大小及位置区域的长度，自动限制
  height: auto; 
  object-fit: cover;
}

说明：

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。