How to make WordPress images responsive

How to make WordPress images responsive

The responsive images can be big on wide screens but automatically adapt to smaller screens such as iphone,iPad. Very easily you can make images responsive. Just follow the simple steps on your blog.


First you have to create the shortcode. Open your functions.php file and paste the following php code in it:

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

add_shortcode('responsive', 'responsive_images');

Now after that open your style.css file and add those CSS rules:

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

So now you can use the [responsive] shortcode to insert responsive images in your wordpress blog:

[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]