Image re-sizing in responsive theme

Resolved stigbratvold
(@stigbratvold)

11 years, 2 months ago

Hi I am using a responsive site and there is a problem occurring when viewing the site on an iPhone the images in post do now want to re-size. Instead it flows out of the screen to the right.

But when I add a caption to the image it re-sizes with the screen. Does anyone know why and if it is possible to have the same re-sizing on the images without captions?

Viewing 15 replies - 1 through 15 (of 20 total)

1 2 →

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 2 months ago
If it’s an <img> tag, use the CSS;
```
max-width: 100%;
```
If it’s a background image, use the CSS;
```
background-size: 100%;
```
Thread Starter stigbratvold
(@stigbratvold)

11 years, 2 months ago
Thanks for the reply Andrew. So I added this to the CSS
```
img {
   max-width: 100%;
}
```
It worked but only problem is that it doesn’t keep the proportions. It stretches the image.
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 2 months ago

Can you post the webpage with this issue?

Thread Starter stigbratvold
(@stigbratvold)

11 years, 2 months ago

yeah sorry I forgot that…
http://www.spetakkel.org/

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 2 months ago

Which images are resizing without correct dimensions?

Thread Starter stigbratvold
(@stigbratvold)

11 years, 2 months ago

All the blog posts… If you check this one out for example
http://www.spetakkel.org/ung-og-lovende-4/

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 2 months ago

What if you add a 100% height to it as well?
Thread Starter stigbratvold
(@stigbratvold)

11 years, 2 months ago
I tried adding this but there is still no difference…
```
img {
   max-width: 100%;
   max-height: 100%;
}
```
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 2 months ago
What about height: 100%;
```
img {
   max-width: 100%;
   height: 100%;
}
```
Thread Starter stigbratvold
(@stigbratvold)

11 years, 2 months ago

It re-sizes the Spetakkel logo on top with the right proportions but for some reason it doesn’t work on the images in the posts…
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 2 months ago
You probably want to narrow down the selectors then, E.g;
```
.hentry img {
   max-width: 100%;
   height: 100%;
}
```
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 2 months ago

Remember to clear your browser’s cache if you want to see instantaneous CSS changes.
Thread Starter stigbratvold
(@stigbratvold)

11 years, 2 months ago
Yeah I just cleared it.

So now I added this css
```
.hentry img {
   max-width: 100%;
   height: 100%;
}
```
It works for the images in the post but the logo on top is not effected by it anymore…
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 2 months ago

Oh I thought you didn’t want the logo affected, you can remove that .hentry bit and revert back to just using img .
Thread Starter stigbratvold
(@stigbratvold)

11 years, 2 months ago
So now I targeted the logo alone using this code as well as the previous code..
```
#logo img {
   max-width: 100%;
}
```
This works exactly as I wanted but I don’t know if it is adding more code than necessarily?

Viewing 15 replies - 1 through 15 (of 20 total)

1 2 →

The topic ‘Image re-sizing in responsive theme’ is closed to new replies.

Image re-sizing in responsive theme

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics