Make WordPress Image Responsive

Advertisemen

Responsive images means It can be big on wide screens and automatically adapt to smaller screens such as iPad.
How to easily Make WordPress Image Responsive ??
Making your images responsive is not difficult to do: Here is a simple TD recipe to achieve it on your wordpress blog.

Click Image to Enlarge

Step 1: Add code in function.php

The first thing to do is to create the shortcode. To do so, open your functions.php file and paste the following code in it:

function responsive_images($atts, $content = null) {
     return '<div class="image-resized">' . $content .'</div>';
}
add_shortcode('responsive', 'responsive_images');

Note: If your theme haven't functions.php page then you can make it

Step 2: Add CSS in style.css

Once done, open your style.css file and add those CSS rules:

@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

Step 3: Use Short-code where you want 

You can now use the [responsive] shortcode to insert responsive images in your blog:
[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]

Advertisemen