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

admin管理员组

文章数量:1130349

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 */
    }
}

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 */
    }
}

• images
• css
• responsive

Share Improve this question edited Sep 19, 2016 at 5:41 Ethan Rævan 4,02955 gold badges2727 silver badges5555 bronze badges asked Jul 17, 2014 at 10:30 user2656065user2656065 1711 gold badge22 silver badges66 bronze badges 1

• .container { max-width: 900px; } img { max-width: 100%; min-width: 100%; width: auto; } – gmazzap Commented Jul 17, 2014 at 12:15

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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'));

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

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

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;
}

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 */
    }
}

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 */
    }
}

• images
• css
• responsive

Share Improve this question edited Sep 19, 2016 at 5:41 Ethan Rævan 4,02955 gold badges2727 silver badges5555 bronze badges asked Jul 17, 2014 at 10:30 user2656065user2656065 1711 gold badge22 silver badges66 bronze badges 1

• .container { max-width: 900px; } img { max-width: 100%; min-width: 100%; width: auto; } – gmazzap Commented Jul 17, 2014 at 12:15

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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'));

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

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

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;
}

本文标签：