Javascript 移动版的主页图像滑块看起来过度拉伸，看起来很糟糕

移动版的主页滑动条看起来很有趣，它看起来拉长了，不太合适。我曾尝试将图像高度设置为“自动”，然后图像变小，无法正确匹配宽度和高度。这是你的电话号码。我尝试了各种调整和移动版本的图片，它看起来拉伸和有趣的桌面相比。请查看链接和帮助

CSS代码
/* ----------------------------------------------------------------
[目录]
1全局重置
2默认样式
3字体设置
4导航菜单
5主页
6服务页面
7关于页面
8推荐页
9联系页面
------------------------------------------------------------------- */
/*----------------------------------------------------
@全局重置
-----------------------------------------------------*/
```*html，正文{
保证金：0；
填充：0；
-moz osx字体平滑：灰度；
-webkit字体平滑：抗锯齿；
-moz字体平滑：抗锯齿；
字体平滑：抗锯齿；
}
身体{
宽度：100%；
身高：100%；
背景色：rgba（255、255、255、1.0）；
溢出x：隐藏；
}
/*----------------------------------------------------
@字体设置
-----------------------------------------------------*/
@字体{
src:url（'../font/TuesdayNight Regular.otf'），
url（'../font/TuesdayNight.woff'），
url（'../font/TuesdayNight.woff2'）；
字体系列：“周二晚上”；
字体重量：较轻；
字体风格：打火机；
}
fontlight先生{
字体重量：较轻；
}
h1{
字体系列：“Nunito Sans”，无衬线；
保证金：0；
字体大小：30px；
}
氢{
字体系列：“Nunito Sans”，无衬线；
保证金：0；
文本转换：大写；
字号：17px；
}
h6{
字体系列：“周二晚上”；
保证金：0；
字体大小：30px；
}
p{
字体系列：“Nunito Sans”，无衬线；
字体大小：15px；
}
@媒体屏幕和（最小设备宽度：250px）和（最大宽度：450px）{
h1{
字体大小：15px；
}
氢{
字体大小：12px；
}
h6{
字体大小：22px；
}
p{
字体大小：12px；
}
}
/*----------------------------------------------------
@默认样式
-----------------------------------------------------*/
.中环{
显示：表格；
身高：100%；
宽度：100%；
}
中环酒店{
显示：表格单元格；
垂直对齐：中间对齐；
}
.whitetxt{
颜色：rgba（255、255、255、1.0）；
}
.blacktxt{
颜色：rgba（0,0,0,1.0）；
}
.goldtxt{
颜色：rgba（2271881541.0）；
}
格雷特先生{
颜色：rgba（128、128、128、1.0）；
}
怀特先生{
背景色：rgba（255、255、255、1.0）；
}
.whitebg2{
背景色：rgba（248249250,1.0）；
}
布莱克先生{
背景色：rgba（0,0,0,1.0）；
}
戈尔德先生{
背景色：rgba（2271881541.0）；
}
格雷伯格先生{
背景色：rgba（0,0,0,0.01）；
}
怀特戈尔德先生{
背景色：rgba（2271881540.25）；
}
.p60{
填充：60px；
}
.p30{
填充：30px；
}
.p20{
填充：20px；
}
.p10{
填充：10px；
}
.p5{
填充物：5px；
}
.m15{
利润率：15px；
}
.ml50{
左边距：50像素；
}
.ml80{
左边距：80px；
}
.ml100{
左边距：100px；
}
.ml200{
左边距：200px；
}
.ml300{
左边距：300px；
}
.太空舱{
高度：100px；
宽度：100%；
}
.centertext{
文本对齐：居中；
}
.垂直{
垂直对齐：中间对齐；
}
.rightFloat{
浮动：对；
}
.leftFloat{
浮动：左；
}
/*----------------------------------------------------
@导航菜单
-----------------------------------------------------*/
.标志{
填充：8px；
利润率：20px0；
}
navbar先生{
身高：100%；
宽度：300px；
位置：固定；
z指数：1；
排名：0；
左：0；
}
@媒体屏幕和（最小设备宽度：280px）和（最大宽度：1024px）{
#导航栏{
不透明度：0；
可见性：隐藏；
z指数：-999；
}
}
纳瓦尔先生{
显示：块；
文字装饰：无；
字体系列：“Nunito Sans”，无衬线；
字体大小：13px；
填充：9px；
}
.bun01{
过渡：所有0.5s缓解；
宽度：20px；
var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();

function showSlides() {
  var slideLength = slides.length;

  // Fade in the slide
  setTimeout(function(){
    if(slideIndex == slideLength) {
      slideIndex = 0;
    }
    slides[slideIndex].classList.add("fadeIn");
   if($(window).width() >= 960) {
    slides[slideIndex].children("img").css("width", "auto");
   }
  }, 10);

  //Fade out the SLide
  setTimeout(function(){
    if(slideIndex == slideLength) {
      slideIndex = 0;
    }
    slides[slideIndex].classList.remove("fadeIn");
  }, 3980);

  slideIndex++;
  setTimeout(showSlides, 4000);
}