Set a css max-width on image attachments for tickets

[kcerny@…]

Images that are wider than the ticket's description div overflow past the size of the containing div, as in the image below:

This can be rectified with a small change to htdocs/css/ticket.css by adding the following:

#ticket .description IMG {
 max-width: 100%;
}

The end result:

[kcerny@…]

Current behavior of trac

[kcerny@…]

Same ticket after max-width css applied

[kcerny@…]

Upon further investigation, it might be better to add max-width: 100% to the img {} stylesheet rule in htdocs/css/trac.css instead.

[Ryan J Ollos <ryan.j.ollos@…>]

Adding the 100% argument to the image macro produces the same result. With that argument, width=100% is added as an attribute of the img element. The code is here​.

Here is an example:

[[Image(overflow.png,100%)]]

I suppose it could make sense to set the max-width to 100% by default.

[Peter Suter]

See also #11116 for adjusting the margin defaults.

[anonymous]

Bump, please set max-width: 100%

[Ryan J Ollos]

You can set max-width to 100% using a custom stylesheet: TracInterfaceCustomization#SiteAppearance. As mentioned in comment:2, you can also use the 100% argument to the ImageMacro.

I don't see anything that needs to be done for this ticket, so I propose we close it as worksforme.

[kcerny@…]

What's the harm in setting a max-width? Why so quick to close the ticket just because there is a workaround?

The suggestion in comment:5 does nothing to address the original issue this ticket was reported for.

[Ryan J Ollos]

You can use the 100% argument to ImageMacro to set the width to 100%. [[Image(...,100%)]]. See comment:2 as well.

[Ryan J Ollos]

Please do not reopen tickets. If another Trac developer disagrees with anything I've stated or has another approach they are welcome to reopen tickets. You've been provided with solutions to your issue. I don't think we will change the behavior because it would introduce inconsistencies with older versions of Trac.