Resize image – keep ratio – without background image

Im trying to achieve the effect shown on this site:

http://fofwebdesign.co.uk/template/_testing/scale-img/target-ratio-resize.htm

BUT this site does it using a background image for a div. I cannot use the background image as the image is inside WordPress and it’s being brought in dynamically using the following code:

<div class="featured-image">
   <?php the_post_thumbnail(); ?>
</div>

So I have tried the same approach and tried the following things o try and bring the image in as a background image:

.featured-image {
  max-width: 960px;
  /* actual img width */
  max-height: 150px;
  /* actual img height */*
  height: 150px;
  /* actual img height - IE7 */
  background-image: <?php the_post_thumbnail(); ?>;
  background-size: cover;
  background-position: center;
}

and using this:

background-image: url(<?php the_post_thumbnail(); ?>);

Alas, I cant seem to get it to work – Im not even sure I can use PHP inside a CSS document…

So I’m looking for a way to achieve this image resize just on the following class without using a background image…

<div class="featured-image">
   <?php the_post_thumbnail(); ?>
</div>

Any help would be massively appreciated – I don’t even know if I’m thinking about it correctly or I’m missing something – Thanks!

Read more here: Resize image – keep ratio – without background image

Leave a Reply

Your email address will not be published. Required fields are marked *