Vote #65057
完了Large inline images overflow
20%
説明
attached images that are larger than the current page size are allowed to overflow past the container. Shouldn't we at least use a css rule to stop the overflow?
Is there a simple way around this?
journals
+1
--------------------------------------------------------------------------------
You can set a max-width to all images in #content:
<pre>
<code>
svn diff
Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css (revision 4358)
+++ public/stylesheets/application.css (working copy)
@@ -79,6 +79,7 @@
* html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
html>body #content { min-height: 600px; }
* html body #content { height: 600px; } /* IE */
+#content img { max-width: 100%; }
#main.nosidebar #sidebar{ display: none; }
#main.nosidebar #content{ width: auto; border-right: 0; }
</code>
</pre>
Are there other elements than images that may cause overflow?
Apparently IE8 does not implement max-width correctly in some cases: http://reference.sitepoint.com/css/max-width#compatibilitysection
--------------------------------------------------------------------------------
I am stepping down from working on Redmine. If someone else is interesting in working on this issue, feel free to reassign it to them.
Eric Davis
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Attached is a patch for what I've been using. Let me know how it works.
--------------------------------------------------------------------------------
I tested this in Win7 x64 using IE 8.0.7601.17514. Apparently max-width works fine as long as the doc-type is not xhtml strict (http://davidnaylor.org/blog/2008/09/ie8-and-max-width/ | http://davidnaylor.org/blog/2009/05/ie8-sorted/). Perhaps even that has been fixed now in later IE8 versions.
Can anyone report this not working?
--------------------------------------------------------------------------------
http://nfine.net/bugs/ie8bug.html can reproduce the bug with dynamically created images. I tried the same with Redmine's preview and it seems to work correctly.
--------------------------------------------------------------------------------
Fixed in r12864.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Jean-Philippe Lang wrote:
> Fixed in r12864.
I'm afraid this fix works only for the wiki and not the issue tracker, see #14021.
<pre><code class="css">
div.wiki img {vertical-align:middle; max-width:100%;}
</code>
</pre>
--------------------------------------------------------------------------------
Stefan Tatschner wrote:
> I'm afraid this fix works only for the wiki and not the issue tracker, see #14021.
No, this fix is not only for the wiki. The patch is not yet applied here.
--------------------------------------------------------------------------------
related_issues
duplicates,Closed,12244,Preview Layout breaks on large images
duplicates,Closed,16053,add overflow hidden