XF 1.4 CSS: Resize image, after click max width message messageContent?

[Axel B]

Hi there,

I found the CSS tweak to resize pictures:

.message .messageContent .messageText img {
max-width: 70%;
}

This works really nice, but after a click the large pictures resize beyond the maximum width of the messageContent (I hope I picked the right class).

Is it possible to cap the maximum width after clicking so it stays in line with the maximum width of the messageContent?

I know a bit of CSS, but this is beyond me

Thanks for your time!

 

[Paul B]

I believe using !important will do that.

Check the FAQ, it's mentioned there.

 

[Axel B]

@Brogan, thanks for your quick reply. Already tried the !important. That will disable an image being clickable to full size.

What I'm looking for is capping the full size to the width of the messageContent so it stays in line with the forum layout. Not sure if that's possible, hence my question

 

[Paul B]

You would have to set the max width to 100%.

 

[Axel B]

@Brogan, thanks again for your fast reply. Not sure if I asked my question clear enough.

On my forum a lot of pictures are uploaded. If I set the max width to 100% it takes a lot of space, hence the CSS tweak (less scrolling, looks better IMHO).
Sometimes people want to see the bigger image (if available), which can be done by clicking on it.

If possible I want to have the bigger image take the maximum width of the messageContent.

I cannot give a link because only a thumb is shown to visitors. I only found out just now... more to look into

 

[Paul B]

It's not possible, hence why I said you would have to set it to 100% (using !important).

Otherwise just set the image width and height limits in the ACP so the max width matches the message content width.

 

[Axel B]

@Brogan, thanks for your reply Clear. Will have to live with it

 

[aana]

Hi,

can you explain me something please ?

if i use this code :

.message .messageContent .messageText img {
max-width: 70%;
}

all images can be uploaded in différent size ( 800x600 or 1600x1600 or wathever ) but they will be resized, they can't be bigger than 70% of the messageContent.
Can members click on the image to show the full size version ?

thx

 

[Paul B]

Resizing is determined by the settings in the options.
That CSS will just restrict the images displayed in posts to 70% of the available width.
Clicking on them will show them full size.

 

[aana]

ok thx,

Its 70 % of the messageContent width ?
In option / attachment / maximal attachment size i can set : 1600 x 1600, then i can use this CSS to restrict the image to be displayed at 70 % of the messageContent width ? But what happens to a small image ?

it will be faster to load the page ?

 

[Paul B]

Yes, 70% of the post area.

Images smaller than that will just display at their full size.

It won't make any different to page loading times as the image is the same - it is just being restricted via CSS in how it displays.

 

[aana]

Thx,

what can i do to reduce the page loading ?