Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Auto resizing of images in posts, etc by CSS.

Started by Antechinus, June 02, 2013, 02:44:08 AM

Previous topic - Next topic


Quote from: IchBin™ on October 28, 2013, 03:02:31 PM
Did you read the info at the link?

Yup but it does not make sense still to what gets added where and a how to do :-(


IchBin™        TinyPortal


/* Auto resizing of avatars in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.avatar>a>img, li.avatar>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 105px;

above code is not resize avatar in posts, at 2.0.7

everythingelse is ok


Is it anyway possible to set max width for attached image? I tried to set it but it affects the thumbnail also. Can't set it specifically to the enlarged thumbnail. Is this doable with CSS or does it need tweaking in the javascript files or elsewhere?

-Captain Ghost-

Everything works fine but avatar resize won't work


-Captain Ghost-

Quote from: Antechinus on August 26, 2014, 02:43:40 AM
Try just using img.avatar instead.
Sorry but i don't know where to replace
Can you do it



mhhh it does not seem to work for me. any ideas?

I included the code via the admin cp. Should I do this via my ftc program?
Also I am new to SMF, so please have patience with me ;)

EDIT: It kind of works now, but the text still breaks out.

/* Auto resizing of images in signatures. */
/* Change sizing to suit your own preferences. */
.signature>img, .signature>blockquote>img,
.signature>.bbc_link>img, .signature>blockquote>.bbc_link>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 50%;

Edit 2: working after I changed    width: auto; --->    width: 50%;


Well, I am not that technical and I don't use CSS but it's my curiosity to work on CSS! Thanks buddy for nice explanation.


great, I will try your css, thats what I m looking for..thanks for the share friend  :D

Thanks for the tip, i'm using it to resize images inside quotes:

blockquote img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 125px;


I use it basically everywhere. Very useful for responsive sites. :)


Hi everyone, this is my first post!
I have a little question, I just converted my forum from phpbb3 to smf, (almost) everything went fine and I used the css code provided here at the end of every theme i installed. While it auto resizes each image on the posts to fit the user's screen with no problems, I was wondering how I could make an image return to its original size by clicking on it and vice versa, just like it's done on attached images thumbnails. I saw on some examples here that this is possible, but it's not working on my forum. Is this the expected behaviour or am I missing something?
Thank you so much in advance!


It's expected behaviour. However, you can still see the original image by right click > View Image.


Thank you so much for your reply! I guess clicking on image as I explained would require javascript, if I am correct? Anyway, your modifications worked as a charm! Thanks again!


Yes, it would require javascript. You could write it yourself if you wanted to, or someone might write it for you if you asked.


Thank you for sharing this Amazing Tips, this will surely Help me in minimizing my site Load time too.  8)


no it won't...   resizing with CSS is still LOADING the original image and forcing it to be resized. This will not have any effect on load time.

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."


This work fine in posts, but if you put URL in image it will not resize.


Two questions.

1. Did you ever make this into a mod?  You ought to! Easier to manage/control that way.

2. If I make the suggested changes as per the OP - and don't like the result - is it an easy process to reverse?

"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.