bxSliderの縦をウィンドウの合わせて可変したい

Chromeのウィンドウを狭くすると

このように枠と画像の間が開きすぎていまって、醜いです。
これをどうしたら、横幅が変わった時に自動で縦も画像に合わせて、変化させることができるのでしょうか？

どなか、ご伝授お願います

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <script src="jquery-1.8.1.min.js"></script>
5  <script src="jquery.bxslider.min.js"></script>
6  <script>
7      $(function(){
8	  $('.slider').bxSlider({
9		  auto: true,
10		  infiniteLoop: true,
11		  speed: 1000,
12		  maxsliders:3,
13		  minsliders:3,
14		  moveSlides: 1,
15		  slideMargin:30
16	  });
17  });
18  </script>
19  <link rel="stylesheet" href="jquery.bxslider.css">
20  <link rel="stylesheet" type="text/css" href="hoge.css" media="all">
21</head>
22
23
24
25<body>
26<center>
27<!--ここからスライダー画像-->
28  <div id="bxslider">
29    <ul class="slider">
30	  <li class="slide"><img src="red.png"></li>
31	  <li class="slide"><img src="xxxx.png"></li>
32	  <li class="slide"><img src="xxxxx.png"></li>
33	  <li class="slide"><img src="xxxxxx.png"></li>
34    </ul>
35  </div>
36<!--ここまで-->
37
38</center>
39</body>
40</html>

CSS
1* {
2  margin:0;
3  padding:0;
4}
5
6html {
7  width:100%;
8  height:100%;
9}
10
11body {
12  height:100%;
13  padding:100px;
14  background-image:url("xxx.png");
15  background-repeat:repaet;
16}
17
18li.slide {
19 position:relative;
20 width: auto;
21 height: 40em;
22}
23
24li.slide img {
25 border:5px #ffffff solid;
26 border-radius:10px;
27 position: absolute;
28 left:0;
29 right:0;
30 top:0;
31 bottom:0;
32 margin: auto;
33}
34.slider {
35    height: auto;
36    list-style: none;
37    margin: 0;
38    padding: 0;
39}
40

jquery
1.bx-wrapper {
2	width:auto;
3	height;auto;
4	position: relative;
5	margin: 0 auto 60px;
6	padding: 0;
7	*zoom: 1;
8}
9
10.bx-wrapper img {
11	max-width: 100%;
12	display: block;
13}
14
15/** THEME
16===================================*/
17.bx-wrapper .bx-viewport {
18	-moz-box-shadow: 0 0 5px #ccc;
19	-webkit-box-shadow: 0 0 5px #ccc;
20	box-shadow: 0 0 5px #ccc;
21	border:  5px solid #fff;
22	left: -5px;
23	padding:0px;
24	background-color: rgba(0,0,0,0.15);
25	
26	/*fix other elements on the page moving (on Chrome)*/
27	-webkit-transform: translatez(0);
28	-moz-transform: translatez(0);
29    	-ms-transform: translatez(0);
30    	-o-transform: translatez(0);
31    	transform: translatez(0);
32}
33
34.bx-wrapper .bx-pager,
35.bx-wrapper .bx-controls-auto {
36	position: absolute;
37	bottom: -30px;
38	width: 100%;
39}
40
41あとは全部公式のソースと同じです。