diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index 1a1bd9e..4cae675 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -668,6 +668,23 @@ 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 @@ 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 @@ 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 @@ 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;
diff --git a/IPython/html/static/notebook/less/outputarea.less b/IPython/html/static/notebook/less/outputarea.less
index 8e1d4cd..6b3b9d8 100644
--- a/IPython/html/static/notebook/less/outputarea.less
+++ b/IPython/html/static/notebook/less/outputarea.less
@@ -66,6 +66,14 @@ 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
diff --git a/IPython/html/static/notebook/less/renderedhtml.less b/IPython/html/static/notebook/less/renderedhtml.less
index 2d39121..d0ceb8b 100644
--- a/IPython/html/static/notebook/less/renderedhtml.less
+++ b/IPython/html/static/notebook/less/renderedhtml.less
@@ -82,5 +82,12 @@
         margin-right: auto;
     }
     * + img {margin-top: 1em;}
-
+    
+    img, svg {
+        max-width: 100%;
+        height: auto;
+        &.unconfined {
+            max-width: none;
+        }
+    }
 }
diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index 9c9696d..10889b2 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -825,6 +825,15 @@ 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 @@ 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;
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 51de1c6..86f489e 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -9617,6 +9617,15 @@ 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 @@ 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;
diff --git a/jupyter_nbconvert/templates/html/basic.tpl b/jupyter_nbconvert/templates/html/basic.tpl
index 2da6292..edafdca 100644
--- a/jupyter_nbconvert/templates/html/basic.tpl
+++ b/jupyter_nbconvert/templates/html/basic.tpl
@@ -142,6 +142,9 @@ 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 %}