diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index b67ed5fd4b..aaa00934cb 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -369,7 +369,7 @@ module.exports = React.createClass({
     },
 
     onResize: function() {
-        dis.dispatch({ action: 'timeline_resize' });
+        dis.dispatch({ action: 'timeline_resize' }, true);
     },
 
     render: function() {
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index bea870818f..ddec81c107 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -189,6 +189,7 @@ module.exports = React.createClass({
     onResize: function() {
         this.props.onResize();
         this.checkScroll();
+        this.refs.geminiPanel.forceUpdate();
     },
 
     // after an update to the contents of the panel, check that the scroll is
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6e46bf01e4..04559ce4fe 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -125,7 +125,8 @@ module.exports = React.createClass({
 
         var thumbHeight = null;
         var timelineWidth = this._body.offsetWidth;
-        var maxHeight = 600*timelineWidth/800;
+        var maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px.
+        // the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
 
         //console.log("trying to fit image into timelineWidth of " + this._body.offsetWidth + " or " + this._body.clientWidth);
         if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);