another stab at confining images to page width

- double-click toggles 'raw' size for large image output
- uses max-width on both markdown and output images
- `height: auto` fixes aspect ratio problems caused by using max-width alone
- img.unconfined disables max-width confinement

IPython/html/static/notebook/js/outputarea.js

@@ -668,6 +668,23 b' define(['
         return toinsert;
     };
 
+    dblclick_to_reset_size = function (img) {
+        /**
+         * Double-click on an image toggles confinement to notebook width
+         *
+         * img: jQuery element
+         */
+
+        img.dblclick(function () {
+            // dblclick toggles *raw* size, disabling max-width confinement.
+            if (img.hasClass('unconfined')) {
+                img.removeClass('unconfined');
+            } else {
+                img.addClass('unconfined');
+            }
+        });
+    };
+    
     var set_width_height = function (img, md, mime) {
         /**
          * set width and height of an img element from metadata
@@ -676,6 +693,9 b' define(['
         if (height !== undefined) img.attr('height', height);
         var width = _get_metadata_key(md, 'width', mime);
         if (width !== undefined) img.attr('width', width);
+        if (_get_metadata_key(md, 'unconfined', mime)) {
+            img.addClass('unconfined');
+        }
     };
     
     var append_png = function (png, md, element, handle_inserted) {
@@ -689,6 +709,7 b' define(['
         }
         img[0].src = 'data:image/png;base64,'+ png;
         set_width_height(img, md, 'image/png');
+        dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
         return toinsert;
@@ -706,6 +727,7 b' define(['
         }
         img[0].src = 'data:image/jpeg;base64,'+ jpeg;
         set_width_height(img, md, 'image/jpeg');
+        dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
         return toinsert;

IPython/html/static/notebook/less/outputarea.less

@@ -66,6 +66,14 b' div.output_area {'
             margin-right: 0;
         }
     }
+    
+    img, svg {
+        max-width: 100%;
+        height: auto;
+        &.unconfined {
+            max-width: none;
+        }
+    }
 }
 
 /* This is needed to protect the pre formating from global settings such

IPython/html/static/notebook/less/renderedhtml.less

@@ -83,4 +83,11 b''
     }
     * + img {margin-top: 1em;}
 
+    img, svg {
+        max-width: 100%;
+        height: auto;
+        &.unconfined {
+            max-width: none;
+        }
+    }
 }

IPython/html/static/style/ipython.min.css

@@ -825,6 +825,15 b' div.output_area .rendered_html img {'
   margin-left: 0;
   margin-right: 0;
 }
+div.output_area img,
+div.output_area svg {
+  max-width: 100%;
+  height: auto;
+}
+div.output_area img.unconfined,
+div.output_area svg.unconfined {
+  max-width: none;
+}
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
 .output {
@@ -1116,6 +1125,15 b' div.output_unrecognized a:hover {'
 .rendered_html * + img {
   margin-top: 1em;
 }
+.rendered_html img,
+.rendered_html svg {
+  max-width: 100%;
+  height: auto;
+}
+.rendered_html img.unconfined,
+.rendered_html svg.unconfined {
+  max-width: none;
+}
 div.text_cell {
   /* Old browsers */
   display: -webkit-box;

IPython/html/static/style/style.min.css

@@ -9617,6 +9617,15 b' div.output_area .rendered_html img {'
   margin-left: 0;
   margin-right: 0;
 }
+div.output_area img,
+div.output_area svg {
+  max-width: 100%;
+  height: auto;
+}
+div.output_area img.unconfined,
+div.output_area svg.unconfined {
+  max-width: none;
+}
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
 .output {
@@ -9908,6 +9917,15 b' div.output_unrecognized a:hover {'
 .rendered_html * + img {
   margin-top: 1em;
 }
+.rendered_html img,
+.rendered_html svg {
+  max-width: 100%;
+  height: auto;
+}
+.rendered_html img.unconfined,
+.rendered_html svg.unconfined {
+  max-width: none;
+}
 div.text_cell {
   /* Old browsers */
   display: -webkit-box;

jupyter_nbconvert/templates/html/basic.tpl

@@ -142,6 +142,9 b" width={{output.metadata['image/png']['width']}}"
 {%- if 'height' in output.metadata.get('image/png', {}) %}
 height={{output.metadata['image/png']['height']}}
 {%- endif %}
+{%- if output.metadata.get('image/png', {}).get('unconfined') %}
+class="unconfined"
+{%- endif %}
 >
 </div>
 {%- endblock data_png %}