2

I am using ExpressionEngine 2.5.5 and Discussion Forum 3.1.10.

Issue i am having it will not re-size photos when my members post them as Image Links, it works in Chrome browser but it will not work in Firefox or IE.

When you look at the forum post where photo is posted with chrome browser it is nicely re-sized to fit the look of the forum.

However if you look at the same post where image is in Firefox or IE the image is huge (true size) and breaks the look of the forum.

Any suggestions on how to fix or where to look would be much appreciated.

1

Sounds like you need to modify the CSS file of the forum theme. This example is working blind as I don't have it installed, but this may work if you can find where the CSS is being set for the image. Set the maximum width to a pixel value or even try max-width: 100%.

A guessing example

.post img {
max-width: 480px;
}

or

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

I run into this problem if images don't have a specified width in the stylesheet. Images larger than the the width of the table cell will stretch the cell.

| improve this answer | |
  • thanks, i am using twitter bootstrap and it seems like img { border:0; height:auto; max-width:100%; vertical-align:middle; } max-width:100% is not working with firefox while it is in chrome, if i remove max-width:100% then chrome browser has same issue . any ideas how to get around this issue. – Phat Border May 15 '13 at 1:14
  • Is there a way you can share the CSS properties for the image using Firebug? If there is anyway to share an example, I think that would be most helpful to solving the problem. Does the posted image have dimension attributes set? – Bransin May 15 '13 at 2:00
  • What version of IE? and is Firefox current version? – Bransin May 15 '13 at 2:02
  • Firefox 21.0 on mac and i think IE 10. – Phat Border May 15 '13 at 2:19
  • this is from html side in firebug <div class="span12"> <p> <img alt="" src="http://www.favhdwallpapers.com/wp-content/uploads/2013/03/cool-hot-car-1920x1200.jpg"> </p> </div>' this is from bootstrap.min.css img { border: 0 none; height: auto; max-width: 100%; vertical-align: middle; }` if i remove that max-width:100% then Chrome has same issue. – Phat Border May 15 '13 at 2:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.