Bug #62902
closed
csc-textpic rendering and styles breaks responsive images in Firefox
Added by Jan Kiesewetter over 9 years ago.
Updated about 8 years ago.
Category:
Content Rendering
Description
The current css_styled_content rendering and css of image/textpic breaks the possibility to use responsive images with
img {
max-width: 100%;
height: auto;
}
Image doesn't scale down.
This effects current Firefox. Chrome works...
There is a bug report for Firefox since 02.2014 but it reads as it won't be fixed.
https://bugzilla.mozilla.org/show_bug.cgi?id=975632
try to set the container of the image (that is .csc-textpic-image) as:
.csc-textpic-image{
display:table;
table-layout: fixed;
width: 100%;
}
this seems to work.
- Target version set to Candidate for patchlevel
I write here my minimal setup to reproduce the bug:
config.doctype=html5
page.cssInline{
10=TEXT
10.value = img{max-width:100%;height:auto;}
}
page.10 < styles.content.get
Steps to reproduce: add a large image; resize (reduce) the browser window; Result:
1) On chrome the image is resized (is "responsive")
2) On Firefox, the image stays fixed and becomes "cropped"
On version 7.6.x and Fluid Style Content, the CSS should be:
.ce-gallery figure{
display:table;
width:100%;
table-layout:fixed;
}
ALERT¶
I've discovered that my solution interferes with some layouts, e.g. "above, center" or "below, center" because the width:100% removes the centering.
- Status changed from New to Closed
I close this because the bug in Firefox has been fixed in version 46, please update your browser.
If you think this is the wrong decision or experience the issue again, then let us know (on Slack for example - https://typo3.slack.com/ ) or open a new ticket and add a relation to this ticket number. Thank you.
Also available in: Atom
PDF
Updated by