Anything Slider - using images different sizes w/ captions

Question

I am using Anything Slider and I can't get the images to display at the same size. I'm using 5 images with different dimensions. They will not center in the viewport either.

I've tried resizing them all to the same size in the html and also changed elements in the css but I am lost as to the best way to handle this. I've tried everything I can think of but I'm missing something. I'm still new to programming so any guidance would be appreciated. http://themusicshop.com/defaultdave3.aspx

Here's the fiddle - http://jsfiddle.net/5Kvf5/

HTML:

<ul id="slider3">    
    <li><a href="summer2008.asp"><img src="http://www.themusicshop.com/images/FinnianRainbowWeb.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Sing-Dance-Act & Much More!</div></li>        
    <li><a href="thedailyjoe.asp"><img src="http://www.themusicshop.com/images/DailyJoeBanner.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Now Serving Breakfast & Lunch</div></li>
    <li><a href="plessons.asp"><img src="http://www.themusicshop.com/images/LessonsBanner.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Private Lessons for All Ages - All Instruments!</div></li>
    <li><a href="aeRntplan.aspx"><img src="http://www.themusicshop.com/images/RentalBanner.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Rent Online in 4 Easy Steps</div></li>            
    <li><a href="t-store.aspx"><img src="http://www.themusicshop.com/images/StoreBanner.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Shop Online</div></li>

</ul>

CSS:

    /*
AnythingSlider v1.8+ Default theme
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
    */

/*****************************
  SET DEFAULT DIMENSIONS HERE
 *****************************/
/* New in version 1.7+ */ 
 #slider3, slider3 li { 
  width: 600px; 
  height: 350px; 
  list-style: none; 
 } 
 /* images with caption */ 
 #slider3 img { 
  width: 100%; 
  height: 100%; 
 } 
 /* position the panels so the captions appear correctly */ 
 #slider3 .panel { position: relative; } 
 /* captions */ 
 #slider3 .caption-top, #slider3 .caption-right, 
 #slider3 .caption-bottom, #slider3 .caption-left {
  background: #000;
  color: #fff;
  padding: 10px;
  margin: 0;
  position: relative;
  z-index: 10;
  opacity: 0.65;
  filter: alpha(opacity=80);
 } 
 /* Top caption - padding is included in the width (480px here, 500px in the script), same  for height */ 
 #slider3 .caption-top { 
  left: 0; 
  top: 0; 
  width: 580px; 
  height: 30px; 
 } 
 /* Right caption - padding is included in the width (130px here, 150px in the script),  same for height */ 
 #slider3 .caption-right { 
 right: 0; 
 bottom: 0; 
 width: 130px; 
 height: 180px; 
 } 
 /* Bottom caption - padding is included in the width (480px here, 500px in the script),    same for height */ 
 #slider3 .caption-bottom { 
  left: 0; 
  bottom: 0; 
  width: 580px; 
  height: 30px; 
 } 
 /* Left caption - padding is included in the width (130px here, 150px in the script), same for height */ 
 #slider3 .caption-left { 
  left: 0; 
  bottom: 0; 
  width: 130px; 
  height: 180px; 
 } 
 /* Caption close button */ 
 .caption-top .close, .caption-right .close, 
 .caption-bottom .close, .caption-left .close { 
  font-size: 80%; 
  cursor: pointer; 
  float: right; 
  display: inline-block; 
 }

/******************
  SET STYLING HERE
 ******************
 =================================
 Default state (no keyboard focus)
 ==================================*/
/* Overall Wrapper */
.anythingSlider-default {
margin: 0 auto;
/* 45px right & left padding for the arrows, 28px @ bottom for navigation */
padding: 0 45px 28px 45px;
}
/* slider window - top & bottom borders, default state */
.anythingSlider-default .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
}
/* Navigation buttons + start/stop button, default state */
.anythingSlider-default .anythingControls a {
/* top shadow */
background: #777 url(../images/default.png) center -288px repeat-x;
color: #000;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
/* Make sure navigation text is visible */
.anythingSlider-default .anythingControls a span {
visibility: visible;
}
/* Navigation current button, default state */
.anythingSlider-default .anythingControls a.cur {
background: #888;
color: #000;
}
/* start-stop button, stopped, default state */
.anythingSlider-default .anythingControls a.start-stop {
background-color: #040;
color: #ddd;
}
/* start-stop button, playing, default state */
.anythingSlider-default .anythingControls a.start-stop.playing {
background-color: #800;
}
/* start-stop button, default hovered text color (when visible) */
/* hide nav/start-stop background image shadow on hover - makes the button appear to come   forward */
.anythingSlider-default .anythingControls a.start-stop:hover, .anythingSlider-default     .anythingControls a.start-stop.hover, .anythingSlider-default .anythingControls a.start-stop   .anythingControls ul a:hover {
background-image: none;
color: #ddd;
}
/*
 =================================
 Active State (has keyboard focus)
 =================================
*/
/* slider window - top & bottom borders, active state */
.anythingSlider-default.activeSlider .anythingWindow {
border-color: #7C9127;
}
/* Navigation buttons, active state */
.anythingSlider-default.activeSlider .anythingControls a {
/* background image = top shadow */
background-color: #7C9127;
}
/* Navigation current & hovered button, active state */
.anythingSlider-default.activeSlider .anythingControls a.cur, .anythingSlider-  default.activeSlider .anythingControls a:hover {
/* background image removed */
background: #7C9127;
}
/* start-stop button, stopped, active state */
.anythingSlider-default.activeSlider .anythingControls a.start-stop {
background-color: #080;
color: #fff;
}
/* start-stop button, playing, active state */
.anythingSlider-default.activeSlider .anythingControls a.start-stop.playing {
background-color: #d00;
color: #fff;
}
/* start-stop button, active slider hovered text color (when visible) */
.anythingSlider-default.activeSlider .start-stop:hover, .anythingSlider- default.activeSlider .start-stop.hover {
color: #fff;
}
/************************
  NAVIGATION POSITIONING
 ************************/
/* Navigation Arrows */
.anythingSlider-default .arrow {
top: 50%;
position: absolute;
display: block;
}
.anythingSlider-default .arrow a {
display: block;
width: 45px;
height: 140px;
margin: -70px 0 0 0; /* half height of image */
text-align: center;
outline: 0;
background: url(../images/default.png) no-repeat;
}
/* back arrow */
.anythingSlider-default .back {
left: 0;
}
.anythingSlider-default .back a {
background-position: left top;
}
.anythingSlider-default .back a:hover, .anythingSlider-default .back a.hover {
background-position: left -140px;
}
/* forward arrow */
.anythingSlider-default .forward {
right: 0;
}
.anythingSlider-default .forward a {
background-position: right top;
}
.anythingSlider-default .forward a:hover, .anythingSlider-default .forward a.hover {
background-position: right -140px;
}
/* Navigation Links */
.anythingSlider-default .anythingControls {
outline: 0;
display: none;
}
.anythingSlider-default .anythingControls ul {
margin: 0;
padding: 0;
float: left;
}
.anythingSlider-default .anythingControls ul li {
display: inline;
}
.anythingSlider-default .anythingControls ul a {
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
text-align: center;
outline: 0;
}
/* navigationSize window */
.anythingSlider-default .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
}
/* Autoplay Start/Stop button */
.anythingSlider-default .anythingControls .start-stop {
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
z-index: 100;
outline: 0;
}
/***********************
  IE8 AND OLDER STYLING
 ***********************/

/* Navigation Arrows */
.as-oldie .anythingSlider-default .arrow {
top: 30%;
}
.as-oldie .anythingSlider-default .arrow a {
margin: 0;
}
/* margin between nav buttons just looks better */
.as-oldie .anythingSlider-default .anythingControls li {
margin-left: 3px;
}
/* When using the navigationSize option, the side margins need to be zero
None of the navigation panels look good in IE7 now =( */
.as-oldie .anythingSlider-default .anythingControls a {
margin: 0;
}
.as-oldie .anythingSlider-default .anythingNavWindow {
margin: 0 2px;
}
.as-oldie .anythingSlider-default .anythingNavWindow li {
padding: 3px 0 0 0;
}
/***********************
  COMMON SLIDER STYLING
 ***********************/
/* Overall Wrapper */
.anythingSlider {
display: block;
overflow: visible !important;
position: relative;
}
/* anythingSlider viewport window */
.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* anythingSlider base (original element) */
.anythingSlider .anythingBase {
background: transparent;
list-style: none;
position: absolute;
overflow: visible !important;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
/* Navigation arrow text; indent moved to span inside "a", for IE7;
  apparently, a negative text-indent on an "a" link moves the link as well as the text */
.anythingSlider .arrow span {
display: block;
visibility: hidden;
}
/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
.anythingSlider .arrow.disabled {
display: none;
}
/* all panels inside the slider; horizontal mode */
.anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
padding: 0;
margin: 0;
}
/* vertical mode */
.anythingSlider .vertical .panel {
float: none;
}
/* fade mode */
.anythingSlider .fade .panel {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
/* fade mode active page - visible & on top */
.anythingSlider .fade .activePage {
z-index: 1;
}
/***********************
  RTL STYLING
 ***********************/
/* slider autoplay right-to-left, reverse order of nav links to look better */
.anythingSlider.rtl .anythingWindow {
direction: ltr;
unicode-bidi: bidi-override;
}
.anythingSlider.rtl .anythingControls ul {
float: left;
} /* move nav link group to left */
.anythingSlider.rtl .anythingControls ul a {
float: right;
} /* reverse order of nav links */
.anythingSlider.rtl .start-stop { /* float: right; */
} /* move start/stop button - in case you want to switch sides */
 /* probably not necessary, but added just in case */
.anythingSlider, .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a,      .anythingSlider .arrow a, .anythingSlider .start-stop {
transition-duration: 0s;
-o-transition-duration: 0s;
-moz-transition-duration: 0s;
-webkit-transition-duration: 0s;
}

Answer 1

I'm not 100% sure what you want, but in this demo, the images are centered (not resized):

HTML template

<ul id="slider3">
    <li>
        <div>
            <a href="page1.asp">
                <img src="image1.jpg" alt="" width="400" height="250">
            </a>
            <div class="caption-bottom">Caption 1</div>
        </div>
    </li>
    ...
</ul>

CSS (to center the images)

/*
  centering css from here: 
  http://css-tricks.com/centering-in-the-unknown/
*/
 ul#slider3 div {
    text-align: center;
}
ul#slider3 div:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
ul#slider3 img {
    display: inline-block;
    vertical-align: middle;
}

Script

showCaptions = function ($this) {
    $this.find('.caption-bottom')
        .show()
        .animate({
            bottom: 0,
            opacity: 1
        }, 400);
};
hideCaptions = function ($this) {
    $this.find('.caption-bottom')
        .stop()
        .animate({
            bottom: -50,
            opacity: 0
        }, 350, function () {
            $this.find('.caption-bottom').hide();
        });
};

$('#slider3')
    .anythingSlider()
    /* this code will make the caption appear when you hover over the panel
    remove the extra statements if you don't have captions in that location */
    .find('.panel')
    .find('div[class*=caption]').css({
        position: 'absolute'
    }).end()
    .hover(function () {
        showCaptions($(this))
    }, function () {
        hideCaptions($(this));
    });

// hide all captions initially
hideCaptions($('#slider3 .panel'));

---

Update: to resize the window, add a wrapper around the entire slider, set its maximum dimension size, then include the expand and aspectRatio options (updated demo):

CSS

.wrapper {
    width: 100%;
    height: 500px;
}

Modified script

$('#slider3')
    .anythingSlider({
        expand: true,
        aspectRatio : 600/350
    })