Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by gopinath para
gopinath para
2,880 Points

Making Images responsive in wordpress website

Hai All,

Can any buddy help me with how to make images responsive in wordpress?

Nick Pettit Zac Gordon

2 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi gopinath para,

Can you be more specific? What's giving you trouble in particular?

Generally, you should be able to make images flexible on any website by setting a max-width of 100%. That way, they're free to fill their containing element. Like this...

img {
    max-width: 100%;
}
John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

+1 to Nick: Adding max-width: 100% will allow your images to move with the container that they are in.

I would highly suggest watching the series on How to Make a Responsive Website and try that.

Once you have those concepts in place, I would also point you towards the site http://adaptive-images.com/

That method uses a PHP file in your root folder and a line of JavaScript in the the <head> to create versions of your images mapped to specific breakpoints that you establish in the PHP file.