Slideshow pictures styling - css - css

Question

I have this slideshow here: http://jsfiddle.net/Jtec5/4/
Codes: Html:
<div id="slideshow">
<div>
<img src="http://images2.fanpop.com/image/photos/13800000/farrari-sports-cars-13821367-1280-960.jpg">
</div>
<div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp3iWMAUsa3krPUVPJnxagcmb86YM59m1mAg6HbBnz_xrZlNr2">
</div>
<div>
<img src="http://images4.fanpop.com/image/photos/17000000/KOENIGSEGG-CCXR-SPECIAL-EDITION-sports-cars-17058415-1920-1440.jpg">
</div>
></div>
<div id="ul"></div>
CSS:
#slideshow {
position: relative;
height: 200px;
padding: 7px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
position: absolute;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
}
#slideshow img {
width: 100%;
height: 200px;
max-width: 100%;
max-height: 200px;
}
#ul {
border-radius: 20%;
width: 50px;
height: 50px;
list-style:none;
margin:0px;
padding:0px;
}
#ul li {
float:left;
border-radius:10px;
width:10px;
height:10px;
border:1px solid white;
background:grey;
}
#ul li.active {
background:black;
}
Jquery:
$("#slideshow > div:gt(0)").hide();
var index = 1;
var maxindex = $('#slideshow > div').length;
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
$('ul li').removeClass('active');
$('ul li:eq(' + index + ')').addClass('active');
index = index < maxindex - 1 ? index + 1 : 0;
}, 3000);
for (var i = 0; i < maxindex; i++) {
$('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}
As you can see, the picture in the slideshow isn't very good, its width is very high and it looks very wide, I'm searching for a code that cuts the picture so it looks good and usual appropriate for the frames of the slideshow box

Answer 1

You mean like this?
#slideshow {
text-align: center;
}
and change width to auto for #slideshow img
#slideshow img {
width: auto;
height: 200px;
max-width: 100%;
max-height: 200px;
}