• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

Axel B

Well-known member
#1
Hi there,

I found the CSS tweak to resize pictures:
HTML:
.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!
 

Axel B

Well-known member
#3
@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 ;)
 

Axel B

Well-known member
#5
@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 :(
 

Brogan

XenForo moderator
Staff member
#6
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.
 
#8
Hi,

can you explain me something please ?

if i use this code :

HTML:
.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
 

Brogan

XenForo moderator
Staff member
#9
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.
 
#10
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 ?
 

Brogan

XenForo moderator
Staff member
#11
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.