<img>タグの画像を画像比をキープしつつ、背景全画面で表示したい。

前提・実現したいこと

スライダーのプラグイン、スリックスライダーを使ってトップページを実装しています。
実現したいことは画像比をキープしつつ、全画面に画像を広げたいです。イメージ的には<img>タグでbackground-image: cover;みたいな感じにしたいです。

発生している問題・エラーメッセージ

現在全画面には広がっているのですが、横に広げると画像が横に引き伸びてしまいます。逆に狭めるとほそーくなってしまいます。

お手数おかけしますがご回答お待ちしております。（ ; ; ）

該当のソースコード

html
1<div class="slider-wrapper">
2	<div class="slider">
3	    <div>
4			<img class="slick-slider-img" alt="Alt" src="images/top_kv1-1.jpg" />
5		  </div>
6		  <div>
7			<img class="slick-slider-img" alt="Alt" src="images/top_kv1-1.jpg" />
8		  </div>
9		  <div>
10			<img class="slick-slider-img" alt="Alt" src="images/top_kv1-1.jpg" />
11		  </div>
12		  <div>
13			<img class="slick-slider-img" alt="Alt" src="images/top_kv1-1.jpg" />
14		  </div>
15		</div>
16		<div class="slider-progress">
17		<div class="progress"></div>
18	</div>
19</div>

css
1/* Slider */
2.slider-wrapper{
3	position: relative;
4    overflow: hidden;
5    width: 100%;
6    
7  }
8  
9  .slick-slider {
10	position: relative;
11	display: block;
12	box-sizing: border-box;
13	-moz-box-sizing: border-box;
14	-webkit-touch-callout: none;
15	-webkit-user-select: none;
16	-khtml-user-select: none;
17	-moz-user-select: none;
18	-ms-user-select: none;
19	user-select: none;
20	-ms-touch-action: none;
21	touch-action: none;
22    -webkit-tap-highlight-color: transparent;
23    width: 100%;
24    height: 100vh;
25  }
26  
27  .slick-list {
28	position: relative;
29	overflow: hidden;
30	display: block;
31	margin: 0;
32	padding: 0;
33  }
34  
35  .slick-list:focus {
36	outline: none;
37  }
38  
39  .slick-list.dragging {
40	cursor: pointer;
41	cursor: hand;
42  }
43  
44  .slick-slider .slick-list,
45  .slick-track,
46  .slick-slide,
47  .slick-slide img {
48    height: 100vh;
49  }
50  
51  .slick-track {
52	position: relative;
53	left: 0;
54	top: 0;
55	display: block;
56	zoom: 1;
57  }
58  
59  .slick-track:before,
60  .slick-track:after {
61	content: "";
62	display: table;
63  }
64  
65  .slick-track:after {
66	clear: both;
67  }
68  
69  .slick-loading .slick-track {
70	visibility: hidden;
71  }
72  
73  .slick-slide {
74	float: left;
75	height: 100%;
76	min-height: 1px;
77	display: none;
78  }
79  
80  .slick-slide img {
81    width: 100%;
82    height: 100vh;
83    margin-top: 82px;
84  }
85  
86  .slick-slide.dragging img {
87    pointer-events: none;
88    width: 100%;
89    height: 100vh;
90  }
91  
92  .slick-initialized .slick-slide {
93	display: block;
94  }
95  
96  .slick-loading .slick-slide {
97	visibility: hidden;
98  }
99  
100  .slick-vertical .slick-slide {
101	display: block;
102	height: auto;
103	border: 1px solid transparent;
104  }
105  
106  .slick-slide > .slick-slider-img {
107	position: relative;
108	display: block;
109	width: 100%;
110    height: 100vh;
111  }
112  
113  .slick-slide .image {
114    /*height: 180px;*/
115    height: 100vh;
116    width: 100%;
117    margin: 0 auto;
118  }
119  
120  .slick-slide img {
121    display: block;
122    width: 100%;
123    height: 100vh;
124  }
125  
126  .slick-slide img.slick-loading {
127	display: none;
128  }
129  
130  
131  .slick-prev{
132	background: #DDD;
133	border: none;
134	border-radius: none;
135	position: absolute;
136	top: 40%;
137	transform: translateY(-20%);
138	left: 100px;
139	padding: 0.25em 0.5em;
140	box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
141	z-index: 400;
142  }
143  
144  .slick-next{
145	background: #DDD;
146	border: none;
147	border-radius: none;
148	position: absolute;
149	top: 40%;
150	transform: translateY(-20%);
151	right: 100px;
152	padding: 0.25em 0.5em;
153	box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
154	z-index: 400;
155  }
156  
157
158
159  /* progress bar */
160  .slider-progress {
161	width: 25%;
162	height: 2px;
163	background: rgba(255,255,255,0.5);
164	position: absolute;
165	bottom: 100px;
166	left: 30px;
167  }
168  .slider-progress .progress {
169	width: 0%;
170	height: 5px;
171	background: #fff;
172  }

js
1$(document).ready(function() {
2  var time = 2;
3  var $bar,
4    $slick,
5    isPause,
6    tick,
7    percentTime;
8
9  $slick = $('.slider');
10  $slick.slick({
11    arrows: true,
12    speed: 1200,
13    adaptiveHeight: false
14  });
15
16  $bar = $('.slider-progress .progress');
17
18  function startProgressbar() {
19    resetProgressbar();
20    percentTime = 0;
21    isPause = false;
22    tick = setInterval(interval, 30);
23  }
24
25  function interval() {
26    if (isPause === false) {
27      percentTime += 1 / (time + 0.1);
28      $bar.css({
29        width: percentTime + "%"
30      });
31      if (percentTime >= 100) {
32        $slick.slick('slickNext');
33        startProgressbar();
34      }
35    }
36  }
37
38  function resetProgressbar() {
39    $bar.css({
40      width: 0 + '%'
41    });
42    clearTimeout(tick);
43  }
44
45  startProgressbar();
46
47  $('.slick-next, .slick-prev').click(function() {
48    startProgressbar();
49  });
50
51});