Backport PR #8062: another stab at confining images to page width

tools/tests/Confined Output.ipynb

@@ -0,0 +1,307 b''
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "#  Test notebook for overflowing content"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "markdown image:\n",
+    "\n",
+    "<img src=\"http://placehold.it/800x200.png\">\n",
+    "\n",
+    "unconfined markdown image:\n",
+    "\n",
+    "<img src=\"http://placehold.it/800x200.png\" class=\"unconfined\">"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    "from IPython.display import Image, IFrame"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Overflow image in HTML (non-embedded)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<img src=\"http://placehold.it/800x200.png\"   />"
+      ],
+      "text/plain": [
+       "<IPython.core.display.Image object>"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Image(url=\"http://placehold.it/800x200.png\", embed=False)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Overflow image:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "image/png": "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\nLzkAAAAASUVORK5CYII=\n",
+      "text/plain": [
+       "<IPython.core.display.Image object>"
+      ]
+     },
+     "execution_count": 3,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Image(url=\"http://placehold.it/800x200.png\", embed=True)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Overflow, unconfined"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "image/png": "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\nLzkAAAAASUVORK5CYII=\n",
+      "text/plain": [
+       "<IPython.core.display.Image object>"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {
+      "image/png": {
+       "unconfined": true
+      }
+     },
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Image(url=\"http://placehold.it/800x200.png\", embed=True, unconfined=True)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Overflow with explicit height, width (retina):"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "image/jpeg": "/9j/4AAQSkZJRgABAQAAAQABAAD//gA+Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcg\nSlBFRyB2NjIpLCBkZWZhdWx0IHF1YWxpdHkK/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMP\nFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEc\nITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgA\nyAcIAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMC\nBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYn\nKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeY\nmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5\n+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwAB\nAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpD\nREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ip\nqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMR\nAD8A9MooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKA\nCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKA\nCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKA\nCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKA\nCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKA\nCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKA\nCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKA\nCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKA\nCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAK\nKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoo\nooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiii\ngAooooAKKKjmnit03yuEX3oAkoqC3vILrd5L7tuM8EYz9anoAKKZJKkMZeRgqjqTVA65aBsASEeo\nXigDSoqK3uYbpN8Lhh39RUtABRTJZo4IzJK4VR3NZ/8AblpuxiXHrt4/nQBp0VHBcRXEe+Jwy+3a\npKACimu6xoXdgqjkk1ntrlorYHmMPULx+tAGlRUNvdw3SloXDY6juKmoAKKKKACiiigAooooAKKK\nKACiqtzqFtaHbI+X/uryagj1u0dsHzE92Xj9KANGikVldQykFTyCKWgAoqvc3kFoAZXwT0Uck1Vj\n1u0dsHzE92Xj9KANKikVldQykFTyCO9LQAUVFcXMNqm+Zwo7epqkuuWhbBEgHqV4/nQBpUUyOVJo\nw8bBlPQin0AFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAF\nFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUU\nUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRR\nQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFA\nBRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAF\nFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUU\nUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBnahqqWhMSLulx3\n6CufnnmuXMsrFucZ7D2rqLiwt7qVJJVJK8cHr9az9dRY7aBUUKoY4AGB0oAb4e/5ef8AgP8AWtus\nTw9/y8/8B/rW3QBzWsXTTXhiB+SPgD37mprfRPOsxI0hWRhlRjj2zVLUomi1CYN/ExYfQ810VpdR\nPYJKXUKqgNk9CKAObtZ5LK7D8jacOvqO4rrgQQCOhrjnzc3bFF5kckD6mutY+TbE9difyFAHOard\nm5u2UH93Gdqj37mrKaEzWgcyETEZC44+lZtqnm3kKn+Jxn867CgDlNPums7tSSQhO1x7V1dclqKe\nXqE6jj5s/nzXT2j+ZZwuTklBn64oAxNbuzJcfZ1PyJ973NLZ6N9otRLJIUZhlQB296zp2Mt1I3dn\nJ/WuwRQiKg6KMCgDkopJbC9z0ZGww9R3FdYjiRFdTlWAIPtXN60mzUWP95Qf6f0rZ0l9+mw5PIyP\nyNAF2iimTSeTBJJjOxS2PXAoAfRWJ/wkP/Tr/wCRP/rVqTXSRWZueq7dwHrnpQBPRWJ/wkP/AE6/\n+RP/AK1bdABVXULk2lm8i/e6L9atUjKGUqwBB6g0Acna2st/cFQfd3POKuX+ji2tzNFIWC/eDD9a\n3IbeG3DCKMIGOTiqWtXKxWZhzl5OAPQetAFLQ7plmNsxyjAlR6GtyWRYYXkbooJNc7osZfUVYdEU\nk/lj+tautPs05h/eYD+v9KAMEmXUL3k5eRvy/wD1VdvtH+y23nRyF9v3gR+opuhJuvmY/wAKEj9K\n37hPMt5U/vKR+lAGNod2RIbVj8rcp7HvW6SACT0FchZP5d9A2f4xn6V02oP5enzsP7hH58UAc5d3\nD314WGTk7UX27Vdn0QxWhkWQtIoyy44PriqulJv1KEHoCT+QrqetAHN6PdmC6ETH93Jxj0Paukrj\nXBguWA4KPx+BrsQQQCOhoAWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigA\nooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACi\niigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKK\nKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoooo\nAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigA\nooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACi\niigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKx9\nf/1EP+8f5VsVj6//AKiH/eP8qAGeHv8Al5/4D/WtusTw9/y8/wDAf61t0AYmuXEBIh2Bphzuz932\nrKS0uJITKkLlB3Apru1xclmPzO3P4muwRFjjVFGFUYAoA5vSLiCG6AlQbm4V8/drfvP+PG4/65t/\nKua1GJYdQmRRgZyB9Rn+tdDEzXGkgnlniIPucYoA57Tv+QjB/v11lcjYttvoD/00H8666gDltX/5\nCk3/AAH/ANBFb+m/8g6D/drntTbdqU5/2sfkMV0diuywgH+wD+lAHKRczpn+8P512dca4MVwwPVW\n/ka7IHIyKAOd17/j+T/rmP5mtHRf+Qcv+8azNcbdqGP7qAf1/rWro67dNjPqSf1oAv010WSNkYZV\ngQR7U6igDndW05LXZJCCIzwRnODUEl6X0uK2ycqxz9O38/0rf1ExDT5vN+7t4Hv2/WuUGMjPTvig\nDY0vS454DNcKSGPyDOOPWt2o4DGbeMxf6vaNv0qSgAooooAhurlLWBpZOg6D1PpXKzzSXdwZH5dj\ngAfyFWNUvTd3JCn90nC+/vV/RtP2qLqUfMfuA9h60AXNNshZ2+G5kflj/SoNe/48U/66D+RrUrN1\ntd2n5/uuD/T+tAFLQP8Aj4m/3B/Ot/rXPaC2LyRfWP8AqK35W2ROx7KTQBx0P+vj/wB4fzrptX/5\nBc3/AAH/ANCFc5arvu4V9XUfrXS6mu7TZwP7ufyOaAMTRf8AkIr/ALprpq5fR226nF7gj9K6igDk\nLzi+uP8Aro3866yH/UR/7o/lXIznzLqVh/E5I/OuwRdqKvoMUALRRRQAUUUUAFFFFABRRRQAUUUU\nAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQA\nUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABR\nRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFF\nFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUU\nAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQA\nUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABR\nRRQAUUUUAFFFFABRRRQAUUUUANeRIkLyMFUdSTxWLrVzDPDEIpUchjnac1qX1u11ZyQoQGbGCenU\nGsX+wbr/AJ6Q/mf8KAH6JcQwef5sipnbjccZ61vKwZQykFSMgjvXPf2Ddf8APSH8z/hW9bxmK2ij\nYglECnHsKAOVvIWtrySPphsqfbtXRQ6nbSWwlaVVIHzKTyD9KL/T475Bk7ZF+62P0rHOh3YbAMZH\nruoAqXErXd48iqcyN8o/lXV28Xk28cX91QKo6fpK2jebIweXtjotaVAHJXkDWl66DgA5U+3at1NX\ntjaeazjeBzH3zU17YRXsYD/K4+647Vk/2Bcbv9bFt9ec0AUIo3vbwL1aRsk+nqa64AKAAMAcCqlj\np0dipIO+Q9WI/lVygDmNXtzBfO2Plk+Yf1rUstUtzZL50gV0GCD1OPSrl1aR3kJjkHuCOoNYzaBO\nG+SaMr6nINAFCeR729Z1UlpG+UfoK6uCIQQRxDoigVTsNKjs28xm8yXscYA+laFABTXdI0LuwVR1\nJNOqvfW7XVnJChAZsYJ6dQaAMTWL1biVYomDRpzkdzSTafs0iO4x+8zub6Hp/T86kj0GfzF8ySLZ\nn5sE5x+VbskSywtER8rLtoAxdGv0iRoJnCqPmUsfzFbisGUMpBBGQR3rnv7Buv8AnpD+Z/wregjM\nVvFGSCUQKSPYUASVR1a4+z2LbThn+Uf1q9WfqlhLfLEI3UbCchu+aAMKxjikulE7qkY5O44z7V0n\n2+0H/LxF/wB9Vjf2Ddf89IfzP+FH9g3X/PSH8z/hQBuxXMEzFYpUdgM4U5pLuD7TaSRd2HH17VQ0\nzTJrK5aSRoyChX5SfUe3tWrQByVnObO9WRgflOGHt3rY1LU4DZtHDIHeQY47Dvmn3+kpduZY28uQ\n9eODVJNAmLfvJowv+zkmgCLRbcy3vmEfLGM/j2ropEEkbI3RgQajtraO1hEUY4HUnqT61NQByHz2\nV6Mj54n/ADreuNWt1sy8UgMjD5V7g+9Pv9MjvcNnZKON2Ov1rNXQJ93zSxhfUZJoAqabbm4vo1x8\nqnc30FdXVazso7KLYnLH7zHqas0AFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFF\nABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUA\nFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU\nUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRR\nRQAUUUUAFFFFABRRRQAUUUUAFFFFAH//2Q==\n",
+      "text/plain": [
+       "<IPython.core.display.Image object>"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {
+      "image/jpeg": {
+       "height": 100,
+       "width": 900
+      }
+     },
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Image(url=\"http://placehold.it/1800x200.jpg\", embed=True, retina=True)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Overflowing IFrame:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"900\"\n",
+       "            height=\"400\"\n",
+       "            src=\"http://ipython.org\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x105239dd8>"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "IFrame(src=\"http://ipython.org\", width=900, height=400)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Overflowing table:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div style=\"max-height:1000px;max-width:1500px;overflow:auto;\">\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>0</th>\n",
+       "      <th>1</th>\n",
+       "      <th>2</th>\n",
+       "      <th>3</th>\n",
+       "      <th>4</th>\n",
+       "      <th>5</th>\n",
+       "      <th>6</th>\n",
+       "      <th>7</th>\n",
+       "      <th>8</th>\n",
+       "      <th>9</th>\n",
+       "      <th>10</th>\n",
+       "      <th>11</th>\n",
+       "      <th>12</th>\n",
+       "      <th>13</th>\n",
+       "      <th>14</th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "    <tr>\n",
+       "      <th>0</th>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "      <td> column</td>\n",
+       "    </tr>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "       0       1       2       3       4       5       6       7       8   \\\n",
+       "0  column  column  column  column  column  column  column  column  column   \n",
+       "\n",
+       "       9       10      11      12      13      14  \n",
+       "0  column  column  column  column  column  column  "
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "import pandas as pd\n",
+    "pd.DataFrame([['column'] * 15])"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}

IPython/core/display.py

@@ -637,7 +637,9 b' class Image(DisplayObject):'
     _FMT_PNG = u'png'
     _ACCEPTABLE_EMBEDDINGS = [_FMT_JPEG, _FMT_PNG]
 
-    def __init__(self, data=None, url=None, filename=None, format=u'png', embed=None, width=None, height=None, retina=False):
+    def __init__(self, data=None, url=None, filename=None, format=u'png',
+                 embed=None, width=None, height=None, retina=False,
+                 unconfined=False, metadata=None):
         """Create a PNG/JPEG image object given raw data.
 
         When this object is returned by an input cell or passed to the
@@ -678,6 +680,10 b' class Image(DisplayObject):'
             from image data.
             For non-embedded images, you can just set the desired display width
             and height directly.
+        unconfined: bool
+            Set unconfined=True to disable max-width confinement of the image.
+        metadata: dict
+            Specify extra metadata to attach to the image.
 
         Examples
         --------
@@ -728,6 +734,8 b' class Image(DisplayObject):'
         self.width = width
         self.height = height
         self.retina = retina
+        self.unconfined = unconfined
+        self.metadata = metadata
         super(Image, self).__init__(data=data, url=url, filename=filename)
         
         if retina:
@@ -756,12 +764,19 b' class Image(DisplayObject):'
 
     def _repr_html_(self):
         if not self.embed:
-            width = height = ''
+            width = height = klass = ''
             if self.width:
                 width = ' width="%d"' % self.width
             if self.height:
                 height = ' height="%d"' % self.height
-            return u'<img src="%s"%s%s/>' % (self.url, width, height)
+            if self.unconfined:
+                klass = ' class="unconfined"'
+            return u'<img src="{url}"{width}{height}{klass}/>'.format(
+                url=self.url,
+                width=width,
+                height=height,
+                klass=klass,
+            )
 
     def _data_and_metadata(self):
         """shortcut for returning metadata with shape information, if defined"""
@@ -770,6 +785,10 b' class Image(DisplayObject):'
             md['width'] = self.width
         if self.height:
             md['height'] = self.height
+        if self.unconfined:
+            md['unconfined'] = self.unconfined
+        if self.metadata:
+            md.update(self.metadata)
         if md:
             return self.data, md
         else:

IPython/core/tests/test_display.py

@@ -22,6 +22,8 b' def test_image_size():'
     nt.assert_equal(u'<img src="%s" width="200"/>' % (thisurl), img._repr_html_())
     img = display.Image(url=thisurl)
     nt.assert_equal(u'<img src="%s"/>' % (thisurl), img._repr_html_())
+    img = display.Image(url=thisurl, unconfined=True)
+    nt.assert_equal(u'<img src="%s" class="unconfined"/>' % (thisurl), img._repr_html_())
 
 def test_retina_png():
     here = os.path.dirname(__file__)

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

@@ -588,6 +588,7 b' define(['
         var toinsert = this.create_output_subarea(md, "output_html rendered_html", type);
         this.keyboard_manager.register_events(toinsert);
         toinsert.append(html);
+        dblclick_to_reset_size(toinsert.find('img'));
         element.append(toinsert);
         return toinsert;
     };
@@ -603,6 +604,7 b' define(['
             html = mathjaxutils.replace_math(html, math);
             toinsert.append(html);
         });
+        dblclick_to_reset_size(toinsert.find('img'));
         element.append(toinsert);
         return toinsert;
     };
@@ -668,6 +670,23 b' define(['
         return toinsert;
     };
 
+    function dblclick_to_reset_size (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 +695,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 +711,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 +729,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
@@ -98,6 +106,8 b' div.output_subarea {'
     overflow-x: auto;
     padding: @code_padding;
     .box-flex1();
+    // appears to be needed for max-width in children to mean anything on Firefox:
+    max-width: calc(~"100% - 14ex");
 }
 
 /* The rest of the output_* classes are for special styling of the different

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/notebook/less/textcell.less

@@ -35,6 +35,10 b' h1,h2,h3,h4,h5,h6 {'
     display: none;
 }
 
+.text_cell.rendered .rendered_html {
+    overflow-x: auto;
+}
+
 .text_cell.unrendered .text_cell_render {
     display: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 {
@@ -881,6 +890,7 b' div.output_subarea {'
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
+  max-width: calc(100% - 14ex);
 }
 /* The rest of the output_* classes are for special styling of the different
    output types */
@@ -1116,6 +1126,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;
@@ -1165,6 +1184,9 b' h6:hover .anchor-link {'
 .text_cell.rendered .input_area {
   display: none;
 }
+.text_cell.rendered .rendered_html {
+  overflow-x: auto;
+}
 .text_cell.unrendered .text_cell_render {
   display: none;
 }

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 {
@@ -9673,6 +9682,7 b' div.output_subarea {'
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
+  max-width: calc(100% - 14ex);
 }
 /* The rest of the output_* classes are for special styling of the different
    output types */
@@ -9908,6 +9918,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;
@@ -9957,6 +9976,9 b' h6:hover .anchor-link {'
 .text_cell.rendered .input_area {
   display: none;
 }
+.text_cell.rendered .rendered_html {
+  overflow-x: auto;
+}
 .text_cell.unrendered .text_cell_render {
   display: none;
 }

IPython/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 %}