WordPress Thumbnail Images

I’m working on a site and on the home page I have three small boxes that are displaying the featured image of a post from wordpress.

I’m trying to get it so that the image views well and responds depending on the screen size of the device it is being viewed on. I’m currently displaying the image as ‘full’ so I can try and crop it with CSS rather than scale up a smaller image.

I was wondering if anyone has any tips on what the best method to do this would be.

I currently have it laid out as follows:

The PHP Code:

<?php $top_query = new WP_Query('cat=CaseStudies&showposts=3'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post(); ?>
    <?php
    echo '<a class="moreinfoC" href="ntg.local/';
        the_permalink();
    echo '/">';
    echo '<div class="col-md-3">';
    echo '<h4 class="case-head">';
        the_title();
    echo '<span> </span></h4>';
    echo '<div class="caseimg">';
        the_post_thumbnail( 'full' );
    echo '</div></a>';
    echo '</div>';
    ?>
<?php endwhile; ?>

The CSS Code:

.caseimg {
    margin-top: -10px; 
    height: 130px;
    overflow: hidden;
    max-height: 130px;
    max-width: 100%;
    width: 100%;
    display: block;
}

.caseimg img {
    width: 100%;
    max-width: 100%;
    height:auto;
}

I’m using Bootstrap/Roots framework too if this is of any use.