Making images responsive in RW

RapidWeaver Classic General
1

I am using the Affero theme in RW and I do not use stacks.

I want to make the images scale down responsively on my site. I know that there is CSS to do this and the theme I use does this when I drag and drop and image on to a Styled page.

However, If I link to an image on my site in an HTML page, it does not behave responsively.
I also tried to drop the image into the Resources folder and link to it in the HTML, but again it does not behave responsively.

Is using the Styled page the only way to do this?

2

Hi @joeace

The image is handled by a class named imageStyle

So, on an HTML page you would add class=“imageStyle” to your image tag

As such…

<img class="imageStyle" src="path/imagename.ext" alt="My sample image">

HTH
Brad

3

A simple solution that works for me with Affero and other themes.

Try giving a width for your image like so:

<img src="path to your image" width="100%">

It should scale your image to full width of its container. You can change the number to whatever you like and the image will responsively fill the container width accordingly.

4

Thank you both, I experimented with both options.

Brad, the class tag is easy to use and it works fine.

Ikemitsu, this solution will work if I make sure that my image is as large as the biggest container it will be used in, Full Width desktop view. Otherwise a smaller image may get pixelated on a desktop but look fine on mobile.

1 Like
5

You could use max-width (your image’s orginal width) to prevent overscaling like so:

<img src="path to your image" width="100%" style="max-width:600px">

6

Ah, I see. Thank you so much.