All 3?: Responsive resizing of images + image width of actual image for small images + max-width for all larger images

Question

What I'd like to achieve is to have images resize responsively – and for that I have to set 'width: 100%' – and at the same time set a maximum width to not have the image as wide as the content

To do that I use:

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}

#content img {
    max-width: 690px;
}

Then the image is responsive – but the problem is, that in case the image width is smaller than 690px the width of the image is too large!

If I only use this:

img {
    max-width: 100%;
    height: auto;
}

The image size (width and height) are right, but the image is not responsive.

How to I achieve all three?

1. Responsive resizing of the image size
2. Image width of the actual image in case the true image width is smaller than 690px
3. Image width of 690px for all larger images

This is an image of which the actual image width is smaller than 690px and where you can see the problem.

I came up with some kind of solution, but since it is more work-around then a proper solution to the specific problem I add it here.

The workaround is to use a different css for smaller window sizes. For larger windows this:

img {
    max-width: 100%;
    height: auto;
       width: auto;         /* The image is made responsive further below for smaller windows (@ 800px) */
}

#content img {
    max-width: 690px;
}

And then for smaller windows:

@media only screen and (max-width: 890px) {
    img {
        width: 90%; /* to make the image responsive */
    }
}

Answer 1

The CSS

Add the following code to your CSS file. That will make the images scalable according to screen size.

Obviously change the class tag if you want to set up just for a specific image class

img{ max-width: 100%; }

img{ -ms-interpolation-mode: bicubic; }

Then you need to run a filter to stop wordpress automatically adding image dimensions to the images you want responsive.

  function remove_wp_width_height($string){
  return preg_replace('/\/i', '',$string);
  }

Then when you need to call the thumbnail so in your template instead of using the_post_thumbnail(); use your new function like this

echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),'large'));

Answer 2

From the link that you given the css properties applying to that image is

#content img{ max-width:690px;}
img { width:100%;height:auto;}

Thats why it smaller images are also stretching. update your answer as:

img {
max-width: 100%;
height: auto;
width: auto;        /* to make the image responsive */
 }
#content { max-width:690px;}

check this fiddle

Answer 3

The simplest way is to keep you styles as it is now. Just limit your container using pixel or percentage.

For example: If you limit your to your image size - your image will stretch until there until there and not further.

If you image size is 200px - then, see below for your final style set.

#content {
    max-width: 200px;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}

See for more details - Making responsive images

Thanks!
Sumesh M.S

Answer 4

Well I add my piece by saying that I'm a beginning wordpress user, and for particularly my portfolio. I have the same responsive image issue, where in the HTML/CSS prototype images say like portfolio piece was like "1000x650" and it scaled. However, in wordpress that didn't work.

So I googled and found the original poster of this issue actually worked for me.

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* to make the image responsive */
}
#content img {
    max-width: 690px;
}