MyBB Community Forums

I'm trying to come up with a solution where my images expand, or contract, based on browser window size. I've come up with a couple scenarios, but the one that works makes my smilies huge.

This doesn't affect the smiley, but it pushes images outside of the trow1; thus, causing the forum to break.

.post_body img {
max-width: 100%;
}

I next tried this, which works for the images, but also affects my smilies. I rely heavily on images for my forum; therefore, having them always fit within the post at max size is optimal. Unfortunately, this also re-sizes any smiley within the post.

.post_body img {
width: 100%;
}

Keep in mind, I have used the image re-size plugin, but setting the width to auto, or 100%, also causes the trow1 to break. Alternatively, I've specified a width in the plugin, allowing the user to click on the image for a larger preview, but once it expands, it too breaks the page.

The only solution I can think of is finding out a way to reset my smiley size upon preview. I tried looking for a template, but the only smiley template I could find referred to the list of smilies you see when editing a post. Is there a way to insert a <div> tag around it, or associate a class with the smiley <img> that gets inserted?

I could just forget about the smiley and figure out a better solution for sizing images within the trow1, but those ideas are escaping me. Any thoughts?

Any thoughts on this?

You could try the post_body img but use ems

post_body img{
max-width: 42em;
}

(2012-06-26, 04:03 AM)Leefish Wrote: [ -> ]You could try the post_body img but use ems

post_body img{
max-width: 42em;
}

Won't ems do the same thing? I'm not so sure it's the unit of measurement, as it is the programming in general. Have you successfully used ems?

You try using a lower percentage like 90%?

Like I said, any image dimension affects the smiley because it too is associated with the img tag. I was trying to figure out how not to affect the smiley, as I've already figured out how to constrain my images.

Anyone?

Still looking for help on this one.

Smilies need to be wrapped in their own class or id to overide what would be inhereted from your parent class or id. I don't see how changing the unit type would help since the issue is the styling is being applied to smilies too which is what you don't want. Max width and min width are VERY useful when you are when you'd like your content to resize dynamically within a specific range of values.. say 480px and 1920px. I use the min max properties often as I feel it gives me the most control concerning width. This issue about pushing outside of trowl1, is trowl1 wrapped together with your content to be displayed in parent div with float or absolute?

Thanks for the reply WebDevanPhoto! Have you seen any way to wrap a smiley in it's own class? I can't seem to figure it out since they are automatically placed inline as an <img> tag with the rest of your post.

I'm not sure I understand your last sentence referring to content displayed inside a parent <div> and floated. Can you clarify?