I have a website (using Wordpress) with multiple thumbnails, these thumbs are centered vertically and horizontally as the image shows:
Howdothethumbsshowthetopoftheimageandcutthebottomifitdoesnotfit?
/*.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'); ?> »</a>
<?php } ?>
<div class="clear"></div>
</div>
</li>