Making the images in your posts and pages on your WordPress website is actually quite simple. Making your images responsive is a case of allowing your images to adjust to the width of their container. For example, when an image is viewed on a desktop computer, it’s width can be 100%, but when viewed on a tablet or smartphone, the same image at 100% may be overkill. The solution is to make the image scale to a percentage of the original when viewed on devices with a smaller screen resolution. The first thing you need to do is to copy the following code in to your themes function.php file. You can do this by navigating to “Appearance” > “Editor” and opening your “Theme Functions” (functions.php) file.
function responsive_images($atts, $content = null) {
return '
‘; }
add_shortcode(‘responsive’, ‘responsive_images’);
This basically adds a shortcode to your WordPress website that when wrapped around your image code will make it responsive. After you’ve added the above code to your function.php file, save your changes and open up your themes style.css file and add the following code:
@media only screen and (max-width:767px) {
.image-resized img {
width:100%;
height:auto;
}
}
In some cases, your theme might have a section in it’s “theme options” that will allow you to input custom css. The 100% width above can be adjusted to suit your needs e.g. 50% of the container width might work better for your images. Now that you’ve edited your functions.php file and themes css, you can use the following shortcode to make an image responsive.
[ responsive ]< img alt="my image" src="http://www.mydomain.com/path-to-image" width="100px" height="100px" />[ /responsive ]
Note: remove the extra spaces from the responsive shortcode & img tags!