0

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 */
    }
}
  • .container { max-width: 900px; } img { max-width: 100%; min-width: 100%; width: auto; } – gmazzap Jul 17 '14 at 12:15
0

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'));
  • Some of the comments below the article seem to suggest that if the images are too small it won't adjust so will hopefully solve your issue of keeping smaller images unstretched – Bysander Jul 18 '14 at 12:06
1

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

  • Thanks for your reply! Isn't this exactly what I mentioned as my solution where "the image size are right, but the image is not responsive"? Why is it working for you but not for me then – is there some other aspect of my css that messes it up..? – user2656065 Jul 17 '14 at 10:45
  • 1) you are getting the images as responsive,2) when actual image is greater than 690 it reduces to 690px. but your problem is your smaller images are also streches to 690px.. am i right?? correct me if i'm wrong.. – Zammuuz Jul 17 '14 at 10:48
  • Exactly! When an image is smaller than 690px it streches to 690px. (Like the one that I linked to.) I don't know how to stop the smaller images from stretching to 690px. – user2656065 Jul 17 '14 at 10:55
  • ok..look my updated answer – Zammuuz Jul 17 '14 at 10:59
  • Unfortunately this does not work. If you set width: auto; then the image does not resize anymore. – user2656065 Jul 17 '14 at 11:19
0

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

0

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;
}
  • Have you seen (and tried) the comment by @G.M. on the original question? – kaiser Jan 12 '15 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.