December 11, 2018 | Paul Gibson

How to Scale Responsive Images in Wordpress

Having trouble sizing images in your responsive WordPress website?

Prior to WordPress 4.4 responsive images could be a bit hit or miss depending on your theme. Sometimes your images might spill out of your content area or be squished vertically on mobile devices. If that sounds like what you’re struggling with, read on!

 

How to Scale Responsive Images in Wordpress

The Problem

If you’re experiencing odd image behavior on small screen sizes when working on your website design, there are several possible causes. At the heart of them all are the HTML that is being rendered to the browser and the CSS that styles it. If that sounds a little daunting, fear not! There are a few simple steps you can take to try to solve this problem without needing to have your theme completely revamped.

  1. Make sure you’ve upgraded to WordPress 4.4 or later (backup your site first, of course!). The 4.4 release included some pretty big changes, one of which being the addition of “srcset” support. Why does that matter? Whenever you upload an image through the WordPress uploader it automatically generates several different sizes of the image and stores them on the server. The srcset support added in 4.4 leverages this by using some special markup so that the browser knows about the smaller versions. That way, the browser can request the most appropriate image size when it is unnecessary. How does this fix the underlying CSS problem? Well, it might not (more on that later) but it does the change in the way the HTML is rendered often circumvents the CSS issues found in some older themes. You may need to regenerate your thumbnails for content you’ve created before upgrading (which creates the image size variations you need). That can be done through the Regenerate Thumbnails plugin.

  2. If you’ve updated Wordpress and your still struggling with images not resizing correctly when you add them with the “Add Media” button, the next step is to add just a bit of CSS to your theme to allow the images to scale properly. Most modern themes made within the last few years should have this CSS already, so if you have an older theme check and see if it has any updates. If that still doesn’t solve your issue you can manually add the CSS yourself. Some themes have built in section where you can add your CSS, but if your doesn’t you can access the stylesheet under “Appearance > Editor” and add the following declaration:

 

img {

  width: 100%;

  height: auto;

}

This statement tells the images to scale to fit their container!

If your theme has enough age on it that you’re having issues with responsive images, it might be time to look into a redesign. If that time has come for you, we’d be happy to help!

If you're having trouble with your website and considering a redesign, download our ebook first to get the most for your effort.

Website Redesign Free Ebook

Editor's Note: This post was originally published on November 14, 2013. It has been updated for relevant content. 

scale-responsive-images-in-wordpress.jpg

Paul Gibson

Paul Gibson

As the leader of our design team, VIEO Design principal and founder Paul Gibson oversees our designers and developers as they create marketing-optimized websites, digital graphics, and print materials. Paul also oversees VIEO's 3D printing division. To date, his most impressive project has been a replacement head for an old My Little Pony. He went with Yoda.

Related Post: