Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 – responsive resizing of the image size, the image width of the actual image in case the true image width is smaller than 690px and an image width of 690px for all larger images?

Thank you!

EDIT: Sorry, I should have obviously included a link to my site: This is an image of which the actual image width is smaller than 690px and where you can see the problem.

EDIT 2: 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 work around 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 */
        }
}
share|improve this question
    
.container { max-width: 900px; } img { max-width: 100%; min-width: 100%; width: auto; } –  G. M. Jul 17 at 12:15

3 Answers 3

up vote 0 down vote accepted

This page seems to give a fairly detailed answer to your problem.

http://www.blissfulinterfaces.com/making-wordpress-images-responsive/

Outline:

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’));
share|improve this answer
    
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 at 12:06
    
Thanks a lot for your help! Great! –  user2656065 Jul 18 at 15:15

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

share|improve this answer
    
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 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.. –  Ammu Jul 17 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 at 10:55
    
ok..look my updated answer –  Ammu Jul 17 at 10:59
    
Unfortunately this does not work. If you set width: auto; then the image does not resize anymore. –  user2656065 Jul 17 at 11:19

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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