Auto resizing of images in posts, etc by CSS.

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

Previous topic - Next topic

CheeseHead05


HunterP


Ant,

What do you exactly mean with this line?

/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;




Antechinus

#63
Quote from: HunterP on June 26, 2013, 03:19:36 PM

Ant,

What do you exactly mean with this line?

/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;

If you set it to 100% it will pick up the full size of the parent element, including any padding the parent has, and use that as the size of the image. That can give overflow problems, so allowing a 5% margin just makes overflow unlikely.

CheeseHead05


HunterP

Quote from: CheeseHead05 on June 27, 2013, 02:56:39 PM
http://forums.solematesxoxo.com/nikeadidas/index.php?topic=3.0
K@ and Ant,
you should be able to view now..

The topic or board you are looking for appears to be either missing or off limits to you.
Please login below or register an account with Nike/Adidas.

CheeseHead05

Ant, did you get a chance to check  it out?

ryan_dwight

hi,

i used the code in the first post but not all images are resized, example in this thread

thank you

IchBin™

Looking at your topic in the link you posted, looks to be working just fine for me.
IchBin™        TinyPortal

ryan_dwight

Ok thanks because on the page 2 all images are big. Maybe on my pc only. Thanks

DSystem

Great change in the CSS. Should be incorporated into the SMF default theme.

Congratulations on your great idea.

BGH

This works pretty well inside topics, but what about "action=recent", "action=post;topic=#;last_msg=#", or "action=profile;area=showposts;u=#"?

Is there a way to modify the CSS to make it work in those actions, too?

Best Regards.

Antechinus

It'd just be a matter of applying the right targeting for the CSS. Can't remember offhand what the elements are in those sections, but Firebug or Web Developer would get them for you. I'm too lazy to look them up right now. :)

crashbox

Hi Antechinus or anyone else that could help

I have installed sms a few days ago with a new theme and have edited the background image
The problem is i look at the website in 1920 x1080 but some users that are viewing the site are using lower resolutions which knocks the background image out of alignment.

I could forward you the link to the site to show you what i mean on different resolutions.
Do i need to add your code Antechinus to the main smf css or to the template css.

Sorry im new to this and im finding my feet.

Best regards

Arantor

This code isn't about resizing the background picture, but about resizing pictures inside posts.

In fact I'm not sure there's a *good* way to get background pictures to work right...

crashbox

Ok thanks for the reply,

So how do web developers create a site that fits all ie: pc's / tablets / phones and so forth. I would of thought what they do is pretty much resizing the whole template with images.

Sorry if i sound a little naive i am just trying to get my head around changing the background image to fit all resolutions used

Best regards   

IchBin™

IchBin™        TinyPortal

crashbox

This is what iam having the problem with but im still a little lost

hxxp:173rd.us.173rd.us/Themes/Black_Ops_2/images/theme/bg_body.jpg [nonactive]  <<needs to resize to all resolutions

IchBin™

IchBin™        TinyPortal

BGH

Quote from: Antechinus on October 27, 2013, 05:28:02 PM
It'd just be a matter of applying the right targeting for the CSS. Can't remember offhand what the elements are in those sections, but Firebug or Web Developer would get them for you. I'm too lazy to look them up right now. :)

Fair enough, will check it later then, and see what I can come across :)

Thanks for the code, it's very handy!  :)

I'm also one of those who think this should be default in SMF :p, maybe handed through the admin center, somehow?

Regards.


Advertisement: