Resizing images for a responsive design

The answer probably lies in the CSS for the TwentyEleven theme, which is responsive:

/* Images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*=”align”],
img[class*=”wp-image-“] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
max-width: 97.5%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

Looks to me like images with an explicit width and height declared on them require a resetting of the width and/or height to ‘auto’ in order to take advantage of responsive resizing.

Good luck!

^ you just saved me a whole lot of sleepless nights lol thanks for pointing that out. However I was looking over it and is there a way to make the thumbnail images for posts fluid? reason I ask is because I copy pasted the code you provided into my theme and it worked for the rest of the images in a post or page but the thumbnail I was not able to do so. Any help is greatly appreciated!!

Thanks in advance.

For me this is working:

<?php if(has_post_thumbnail()) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'thumbname' ); echo '<img src="' . $image_src[0] . '" width="100%" />'; } ?>

I put it in my template-file. With ‘thumbname’ is the name of the thumbnail defined in functions.php

@teolopez – I’d imagine that all you have to do is update those CSS selectors so that your thumbnail is being selected too.

The reason for weird vertical scaling (when we make them scalable in CSS), is because of the width and height in <img> tags. WordPress automatically adds a width and height to all it’s <img> tags.

Even though we make the images scalable in CSS, with img{max-width: 100%;} We have to completely remove both width and height values from all images <img> for them to scale proportionately.
If it’s an image in a post or a static page/ template page, all you have to do is, add the above CSS to the style.css file, and then remove the ‘width’ and ‘height’ properties from the <img> tag.
If it’s a dynamic image such as a slideshow or post thumbnail we can use a function to remove the width and height. Here’s a link to a tutorial

This is the page/demo which I have put the above function to work..

@thanushka – Have you had a look through the twentyeleven theme? The images still have width and height attributes, but the CSS I copied out of twentyelevent’s style.css and shared above enables the images to behave responsively even with the width and height attributes.

@nataliemac The setting the height to auto doesn’t work for images such as post thumbnails of a custom post type. The link I posted (it’s an article I wrote after facing and finding a solution for this same issue), show how to make all images responsive.

@thanushka That’s so weird! I wonder why it works in one place and not another. I’ll have to investigate and see what’s going on.

nice article
https://www.webdesignshock.com/responsive-web-design/

I’m currently checking out this purely CSS solution (with media queries) to making all images in WordPress resize responsively : https://jeffsebring.com/responsive-wordpress-images/ – so far, so good for me.

The problem with a pure css approach is that the images can have large file sizes, which can impact website performance significantly on a mobile device.

I’ve created a small theme plugin that allows your theme to detect whether it is on a mobile device and load a scaled down version of the image.

Check it out!

https://www.spaceheadconcepts.com/blog/wordpress/responsive-images-responsage/

What about making images with captions responsive? Big barrier to this seems to be that the width of the caption div is declared inline as a pixel value.

https://core.trac.www.ads-software.com/ticket/14380

Anybody have any great ideas? I did find some code that removes the inline style, but then what? Using a percentage (of the post width) to set the caption div width works better, but how would you accomodate different image sizes (e.g. thumbnail vs. large).

Thoughts?

Not sure if this applies to all themes or not but this is the css I used to get images with captions (and the captions themselves to resize properly

.wp-caption,
.wp-caption-text {
max-width: 97.5%;
height: auto;
width: auto9; /* ie8 */
}

Hope others find this useful.

BTW I am using the headway theme (not free unfortunately) and the tabloid child theme.

Now I want to figure out how to resize embedded videos