Positioning of a thumbnail

Question

I have a site (using Wordpress) with several thumbnails, these Thumbs are centered vertically and horizontally as the image shows:

How to make Thumbs show the top of the image and cut the bottom if it doesn’t fit?

/*.recent-posts .post-thumb {
margin: 0;
position: relative;
}*/
.recent-posts .post-thumb {
margin: 0;
position: relative;
height: 180px;
overflow: hidden !important;
vertical-align: top; /* talvez esse não se faça necessário */
}

.recent-posts .post-thumb img {
max-width: 100%;
height: auto;
}

.recent-posts .post-thumb img:hover {
opacity: .7;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
}

.recent-posts .post-thumb img {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}

.recent-posts .post-content {
padding: 10px 15px;
background-color: #1f1f1f;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

.recent-posts li:hover .post-content {
background-color: #252525;
}

.recent-posts li:hover .video-icon {
opacity: .9;
}

.recent-posts h2 {
font-size: 20px;
line-height: 1.3;
margin: 0 0 5px;
}

.recent-posts h2 a {
color: #fff;
}

.recent-posts h2 a:hover {
color: #ccc;
}


/* Posts in Blog template */

.archive-blog .recent-posts li {
margin: 0 0 30px;
width: 100%;
display: block;
}

.archive-blog .recent-posts li:before,
.archive-blog .recent-posts li:after { content: " "; display: table; }
.archive-blog .recent-posts li:after { clear: both; }

.archive-blog .recent-posts li .post-thumb {
float: left;
margin: 0 20px 0 0;
}

.archive-blog .recent-posts .post-thumb img {
-webkit-border-radius: 3px;
border-radius: 3px;
}


.archive-blog .recent-posts li .post-content {
background: none;
padding: 0;
overflow: hidden;
}

<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<?php if ( option::is_on( 'display_thumb' ) ) { ?>

		<div class="post-thumb">

			<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">

				<?php if ( has_post_format( 'video' ) ) {
					echo '<span class="video-icon"></span>';
					}
				?>
				
				
				<?php 
					get_the_image( array( 'size' => 'loop', 'link_to_post' => false, 'width' => 260, 'height' => 180 ) );  
					//get_the_image( array( 'size' => 'loop', 'link_to_post' => false ) );  
					//get_the_post_thumbnail( 'thumbnail' ); 
				?>


			</a>

		</div>

	<?php } ?>

	<div class="post-content">

		<div class="post-meta">

			<?php if ( option::is_on( 'display_category' ) ) { ?>
				<span class="meta-category"><?php the_category(' / '); ?></span>
			<?php } ?>

			</div>

		<h2 class="truncate"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

		<div class="post-meta">

			<?php if ( option::is_on( 'display_date' ) ) { ?>
				<span class="meta-date"><?php echo get_the_date(); ?></span>
			<?php } ?>

				<?php edit_post_link( __('Edit', 'wpzoom'), '<span>', '</span>'); ?>

		</div>

		<?php if ( option::is_on( 'display_excerpt' ) ) {

			the_excerpt();	}

			if(get_field('streaming1') || get_field('streaming2') || get_field('streaming3') || get_field('download720') || get_field('download1080')) {
				if(get_field('download720')) {
					echo '<a href="' . get_field('download720') . '" class="wpz-sc-button teal small" style="padding: 5px 10px"><span class="wpz-download">720p</span></a>';
				}

				if(get_field('download1080')) {
					echo '<a href="' . get_field('download1080') . '" class="wpz-sc-button small" style="padding: 5px 10px"><span class="wpz-download">1080p</span></a>';
				}
			}	else {
				echo '<a href="#" class="wpz-sc-button red small" style="padding: 5px 10px"><span class="wpz-info">Em breve</span></a>';
			}
		?>


		<?php if ( option::is_on( 'display_readmore' ) ) { ?>
			<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="more-link" rel="nofollow"><?php _e('Read more', 'wpzoom'); ?> &raquo;</a>
		<?php } ?>

		<div class="clear"></div>

	</div>
</li>

Answer 1

Try:

<style type="text/css">
.recent-posts .post-thumb {
    margin: 0;
    position: relative;
    height: 180px;
    overflow: hidden !important;
    vertical-align: top; /* talvez esse não se faça necessário */
}
</style>

Answer 2

You can solve your problem like this:

.post-thumb > a{
    display: block!important;
    height: 180px!important; /*Aqui seria a altura máxima que você quer*/
    overflow: hidden!important;
    position: relative!important;
}

Answer 3

Changed function:

get_the_image( array( 'size' => 'loop', 'link_to_post' => false, 'width' => 260, 'height' => 180 ) );

For:

echo get_the_post_thumbnail( $post_id );

Sorry for the misinformation...