2010, 2013, Office 365, SharePoint, Web Design
SharePoint image max-width in IE and FireFox not working
So you have an image that is styled to max-width: 100% but it displays at its native width and pushes over your other content.
The issue here is that images set to max-width: 100% don’t properly understand which parent they’re supposed to mimic the 100% width of, so they cascade up the list to the first logical element width a properly defined or definable width.
Webpart zones and the divs involved in webpart bits (chrome, container, etc.) are set to display: table and table-cell.
Override it by adding this to your stylesheet:
.ms-webpart-zone, .ms-webpart-chrome, .ms-webpart-cell, .ms-webpart-cell-vertical { display: block !important; }
You can now safely add the max-width style to images in specific containers. For your reference, I generally use this for web parts, specifically content editor web parts.
.ms-WPBody img { max-width: 100% !important; height: auto !important; }
Please note: This will not work if you want webparts to render side-by-side in a single webpart zone since the display: block forces a full width on the container and wraps the next element.
About Author
Comments are closed