Join Morten Rand-Hendriksen for an in-depth discussion in this video Making images responsive, part of WordPress: Building Responsive Themes.
- View Offline
Once you've made the main content responsive, you have to make sure that the images also …respond to the size of the screen or window; otherwise, you get a weird effect where the …image starts spilling out over the edges. …You can see it here, when I start resizing this window, that the image literally spills …out over the edge, and if I go down further, you'll see that we start cropping the image …with the edge of the window. …That is not an ideal situation, and we need to fix it. …But there's an added challenge. …In WordPress, the author can insert images in many different ways.…
From the top here, you see the first image is inserted with a style called None, which …means it just flows with the rest of the content. …Below that, we have an image aligned to the left, we have one aligned to the center, and …we have aligned to the right, and finally, we have an image that has a caption on it, …and we need to account for all of these when we create image styles. …Fortunately, there's a relatively easy way of making images responsive. …
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry