Как сделать адаптивные картинки в слайдере?

<div id="slider-wrapper">
	<div class="slider">
		<div class="slide" style="background-image: url({THEME}/images/slider/slide1.jpg);">
			<div class="cnt">
				<div class="slide-text">
					<h2>Расчистка территории</h2>
                    
				</div>
			</div>
		</div>
		<div class="slide" style="background-image: url({THEME}/images/slider/slide2.jpg);">
			<div class="cnt">
				<div class="slide-text">
					<h2>Измельчение веток</h2>
				</div>
			</div>
		</div>
		<div class="slide" style="background-image: url({THEME}/images/slider/slide3.jpg);">
			<div class="cnt">
				<div class="slide-text">
					<h2>Услуги автовышки 22 метра</h2>
				</div>
			</div>
		</div>
		<div class="slide" style="background-image: url({THEME}/images/slider/slide4.jpg);">
			<div class="cnt">
				<div class="slide-text">
					<h2>Вырубка, обрезка деревьев</h2>
				</div>
			</div>
		</div>
		<div class="slide" style="background-image: url({THEME}/images/slider/slide5.jpg);">
			<div class="cnt">
				<div class="slide-text">
					<h2>Дробление пней (измельчение пней)</h2>
				</div>
			</div>
		</div>
	</div>
	<span class="slider-button slider-button-prev"><i class="fa fa-angle-left"></i></span>
	<span class="slider-button slider-button-next"><i class="fa fa-angle-right"></i></span>
</div>

#slider-wrapper, .slider, .slide {
height: auto;
  width: 100%;
}
.slide {
 background-size: cover;
}
.slider-button {
 position: absolute;
 width: 60px;
 height: 60px;
 line-height: 60px;
 font-size: 30px;
 color: #fff;
 box-shadow: inset 0 0 0 2px #fff;
 text-align: center;
 cursor: pointer;
 top: 50%;
 margin-top: -30px;
 z-index: 10;
 opacity: 0;
 transition: all .3s ease;
}
.slider-button-prev {
 left: -60px;
}
.slider-button-next {
 right: -60px;
}
#slider-wrapper:hover .slider-button-prev {
 left: 50px;
 opacity: 1;
}
#slider-wrapper:hover .slider-button-next {
 right: 50px;
 opacity: 1;
}