Handling image display in responsive WordPress theme

Handling image display in responsive WordPress theme ?>

I am developing a responsive WordPress theme using bootstrap. During my WordPress theme development, i struck with a problem while displaying an image. The problem was of image re-sizing. When the theme is displayed on mobile device, the image was getting pulled long.

pulled_image

In my theme template file, the following code display the image.

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

In above code uses ‘custom-size’. The ‘custom-size’ for the post thumbnail image is defined in functions.php file using a function add_image_size( $name, $width , $height , $crop) as follows:

add_image_size( 'custom-size', 800, 500,true );

The size of div element having class “featured-image” is around 780px on  desktop.  On desktop the image displayed properly.  But when same image was  displayed on mobile device where div with class “featured-image” is of width less than 768px, the  width of the image was adjusted because of bootstrap responsive design but height was not adjusted. It was 500px only. So image looked liked pulled down and shrink from side. To solve this problem i added the following code to style.css file and it solved the problem:

img.wp-post-image{
height:auto;
}

By adding  height: auto, the browser calculate and select a height for the specified image. The final image displayed was as follows.

proper_image