How to easily make WordPress images responsive

Responsive images can be big on wide screens and automatically adapt to smaller screens such as iPad. Making your images responsive is not difficult to do: Here is a simple recipe to achieve it on your blog. 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>’ . $content .'</div>’;
}

add_shortcode(‘responsive’, ‘responsive_images’);
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;
}
}

You can now use the [responsive] shortcode to insert responsive images in your blog:

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

0 Comments

Leave a reply

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

*