Html 为什么我的图像不适合'；光滑滑块'；

这是我的第一篇帖子——我在研究了其他人的问题和答案后才加入这个社区，但不幸的是我迷路了

我在一个非常基本的投资组合网站上工作，有html和css的初学者经验。这一次，我使用了一个模板，从我喜欢的响应性代码片段和布局开始，但我想自己从中学习

我的大问题是，正如标题所述，我无法将我的图像适配到滑块上，例如，在肖像图像上，图像的宽度适配到滑块的宽度，拉伸长度（到正确的比例），因此我只能看到例如1/5的图像全宽。 我更希望能够在不改变图像尺寸的情况下仍然使用纵向和横向图像，这样我就可以轻松、定期地上传新内容。 我也很乐意使用一个全新的滑块-我替换它的问题是我真的不知道我在这里做什么，当我编辑它时，滑块完全消失了

我一直在阅读以下有类似问题的文章，但不知道如何将其应用于我自己的问题：

HTML是一团乱麻，但CSS就是这样：

.slick滑块
{
位置：相对位置；
显示：块；
-moz框大小：边框框；
框大小：边框框；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-webkit触摸标注：无；
-khtml用户选择：无；
-ms触摸动作：泛y；
触摸动作：泛y；
-webkit点击突出显示颜色：透明；
}
.花里胡哨的名单
{
位置：相对位置；
显示：块；
溢出：隐藏；
保证金：0；
填充：0；
}
.花里胡哨的名单：聚焦
{
大纲：无；
}
.slick-list.drawing
{
光标：指针；
光标：手；
}
.光滑的滑块.光滑的轨迹，
.光滑的滑块.光滑的列表
{
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.光滑的轨道
{
位置：相对位置；
排名：0；
左：0；
显示：块；
}
.光滑轨道：之前，
.光滑轨道：之后
{
显示：表格；
内容：''；
}
.光滑轨道：之后
{
明确：两者皆有；
}
.光滑的装载.光滑的轨道
{
可见性：隐藏；
}
.滑滑梯
{
显示：无；
浮动：左；
身高：100%；
最小高度：1px；
}
[dir='rtl'].光滑的滑梯
{
浮动：对；
}
.滑溜式img
{
宽度：100%；
高度：450px；
最小高度：420px；
对象匹配：覆盖；
显示：块；
}
.滑溜
{
显示：无；
}
.滑动滑轨.拖动img
{
指针事件：无；
}
.滑溜初始化.滑溜
{
显示：块；
}
.光滑的装载.光滑的滑动
{
可见性：隐藏；
}
.平滑垂直.平滑滑动
{
显示：块；
高度：自动；
边框：1px实心透明；
}
@字符集“UTF-8”；
.滑头{
左：20px；
}
.下一个{
右：20px；
}
.光滑点{底部：-25px；}
.site info{text align:center；}
ul.social.text-center{
列表样式类型：无；
}

，b.$dots=a（d）.appendTo（b.options.appendDots），b.$dots.find（“li”）.first（）.addClass（“slick active”）.attr（“aria hidden”，“false”）}，b.prototype.buildOut=function（）{var b=this；b.$slides=b.$slider.children（：not（.slick cloned）”）.addClass（“slick slide slide slide”），b.slideCount=b.$slides.length，b.$slides.each（函数（b，c）{a（c）（数据平滑索引），b）}），b.$slidesCache=b.$slides，b.$slideTrack.addClass（“平滑滑块”），b.$slideTrack=0==b.slideCount？a（“”）。appendTo（b.$slides.wrapAll（“”）。parent（），b.$list=b.$slideTrack.wrap（“”）。parent（），b.$slideTrack.css（“不透明度”，0），（b.options.centerMode=======！0）&（b.options.swiptoslideslide=！0）和（b.options.slidestroll=1），a（“$img[data]”），非惰性滑块.addClass（“平滑加载”）、b.setupInfinite（）、b.buildArrows（）、b.buildDots（）、b.updateDots（）、b.options.accessibility==！0&&b.list.prop（“tabIndex”，0）、b.SetSlideClass（“数字”==此.currentSlide的类型？此.currentSlide:0）、b.options.Dragable===！0&&b.list.addClass（“Dragable”）}、b.prototype.buildRows=函数（）{变量b、c、d、e、f、g、h、a=此；如果（e=document.createDocumentFragment（），g=a.$slider.children（），a.options.rows>1）{for（h=a.options.slidesPerRow*a.options.rows，f=Math.ceil（g.length/h），b=0；f>b；b++{var i=document.createElement（“div”）；for（c=0；cd.options.slideshow&&d.slideHandler（d.currentSlide-g，！1，c）；break；case“下一步”：g=0==f？d.options.SlidesToroll:f，d.slideCount>d.options.SlidesShow和&d.slideHandler（d.currentSlide+g，！1，c）；break；case“index”：var i=0==b.data.index？0:b.data.index | a（b.target）.parent（）.index（）*d.options.slidesToroll；d.slideHandler（d.checkNavigatable（i），！1，c）；break；默认值：return}，b.prototype.checkNavigatable=var函数（a，如果d=c）；如果d=c（c=b.getNavigableIndexes（），d=0，a>c[c.length-1]）a=c[c.length-1]；else for（c中的变量e）{if（ab.options.slidesToShow&&a（“li”，b.dots.）。off（“click.slick”，b.changelide），b.options.do