WordPress Query Image Size - css

Question

How can I make the slider box frame bigger within the query for my Church website slider. The $width and $height only changes the size of image. The image on the slider is getting chopped off - I want to show image slider box as big as the frame. Or how can I crop the image so it won't cut it off - to see the full image size click on image to see the post.
I want to make the width of slider box 600 and the height 300 but the letters at the bottom of box keep changing position and doesn't look right.
Website: brbconline.org
<div id="featuredContainer">
<div id="featured">
<ul>
<?php query_posts( 'posts_per_page=5' ); ?>
<?php $recentPosts = new WP_Query(); $recentPosts->query('category_name='. $church_slider .'&showposts= 7'.''); while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<?php $image = ""; $first_image = $wpdb->get_results("SELECT guid FROM $wpdb->posts WHERE post_parent = '$post->ID' "."AND post_type = 'attachment' ORDER BY `post_date` ASC LIMIT 0,1"); if ($first_image) {$image = $first_image[0]->guid;} ?>
<?php $width = "570"; $height = "255"; ?>
<li>
<h2><?php the_title(); ?></h2>
<img class="featimg" src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $image ?>&w=<?php echo $width ?>&h=<?php echo $height ?>&zc=1" alt="<?php the_title(); ?>" height="<?php echo $height ?>" width="<?php echo $width ?>" />
</li>
<?php endwhile; ?>
</ul>
</div>
</div> <!--end featuredContainer-->
CSS is here:
/* -----FEATURED STUFF----- */
#featuredContainer {margin:0 0 40px; padding: 0; width:560px;position:relative; height:290px; overflow:hidden; border: 1px solid #666; border-bottom:none;}
#featured {overflow:hidden; width:560px; height:290px; position:relative;}
#featured ul, #featured li{margin:0;padding:0;list-style:none; position:relative; overflow:hidden; width:560px; height:290px;}
#featured li h2 a {position: absolute; bottom:0; left: 0; line-height: 36px; padding:0; text-align:center; font-size: 12px; color: #fff; background-repeat: repeat-x; background-position: left center; width: 100%; font-weight:bold;}
#featured li h2 a {color:#fff;}
span#prevBtn a,
span#prevBtn a:link,
span#prevBtn a:visited,
span#nextBtn a,
span#nextBtn a:link,
span#nextBtn a:visited {
margin: 0;
font-weight:bold;
cursor: pointer;
position: absolute;
font-size:12px;
padding:8px 15px;
background: #6a3b14 url('images/buttonback.jpg') repeat-x center;
line-height:20px;
color:#fff;
font-weight:bold;
outline: none;
}
span#prevBtn a {bottom:0px; left:0px; border-right:1px solid #89642D;}
span#nextBtn a {bottom:0px; right:0px; border-left:1px solid #89642D;}
span#prevBtn a:hover, span#nextBtn a:hover {text-decoration: none; background: #6a3b14 url('images/buttonback.jpg') repeat-x top;}
span#prevBtn a:active, span#nextBtn a:active {background: #6a3b14 url('images/buttonback.jpg') repeat-x bottom;}