posts: add back "resize to window" link.

* Add back "Resize to window" link.
* Add Z shortcut for resize to window link (mnemonic: Z for zoom image).
* Resize images to screen width by default on both desktop and mobile.
* Make it so that notes are nested directly inside the .image-container
  element with the image, instead of inside a separate .note-container
  element. This means .image-container and .note-container are now the
  same element. This is so that the size of the .note-container is
  driven by the size of the image, which ensures that notes are
  automatically resized as the image is resized.

app/javascript/src/styles/base/020_base.scss

@@ -151,6 +151,16 @@ ul.list-inline {
   }
 }
 
+.fit-width {
+  max-width: 100%;
+  height: auto !important;
+}
+
+.fit-height {
+  max-height: 90vh;
+  height: auto !important;
+}
+
 .mobile-only {
   display: none;
   @media (max-width: 660px) { display: initial; }

app/javascript/src/styles/specific/notes.scss

@@ -1,5 +1,6 @@
 .note-container {
-  position: absolute;
+  display: inline-block;
+  position: relative;
 
   div.note-body {
     position: absolute;

app/javascript/src/styles/specific/posts.scss

@@ -341,12 +341,6 @@ div#c-posts {
       margin: 1em 0 0.5em;
     }
 
-    /* This ensures the image appears above the note container, but beneath any notes. */
-    #image {
-      position: relative;
-      z-index: 50;
-    }
-
     .pool-name, .search-name {
       word-wrap: break-word;
     }

app/javascript/src/styles/specific/z_responsive.scss

@@ -92,11 +92,6 @@
     }
   }
 
-  img#image {
-    max-width: 100%;
-    height: auto;
-  }
-
   .user-disable-cropped-false {
     article.post-preview {
       width: 33.3%;