4 deleted 106 characters in body
source | link

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

theThe 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!

  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

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 aroundworkaround 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 {
       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 – 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 */
        }
}

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 */
    }
}
3 Work around added
source | link

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

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.

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 */
        }
}
2 Added a link to an image to show the problem
source | link

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.

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!

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.

1
source | link