iOS: Center images in bubble, shrink bubble down to image size

stylesheets/_ios.scss

@@ -286,26 +286,39 @@ $ios-border-color: rgba(0,0,0,0.1);
     clear: both;
   }
 
-  .outgoing .with-tail.tail-wrapper {
+  .outgoing .tail-wrapper {
     float: right;
 
     .inner-bubble {
-      .attachments {
-        background-color: $blue;
-      }
-      .content {
-        background-color: $blue;
-      }
       max-width: 100%;
-      &, .body, a {
-        @include invert-text-color;
-      }
     }
   }
 
-  .incoming .with-tail.tail-wrapper {
+  .incoming .tail-wrapper {
     float: left;
 
+    .inner-bubble {
+      max-width: 100%;
+    }
+  }
+
+  // We don't add a background to the attachments div unless there's also text. The
+  //   browser doesn't always clip the border-radius properly, so we get a partial-pixel
+  //   halo effect.
+  .outgoing .with-tail.tail-wrapper {
+    .attachments {
+      background-color: $blue;
+    }
+    .content {
+      background-color: $blue;
+    }
+
+    &, .body, a {
+      @include invert-text-color;
+    }
+  }
+
+  .incoming .with-tail.tail-wrapper {
     &:before {
       left: -1px;
       background-color: white;
@@ -317,7 +330,6 @@ $ios-border-color: rgba(0,0,0,0.1);
     .inner-bubble {
       background-color: white;
       color: black;
-      max-width: 100%;
     }
   }
 
@@ -338,6 +350,10 @@ $ios-border-color: rgba(0,0,0,0.1);
     a {
       border-radius: 15px;
     }
+    img {
+      margin-right: auto;
+      margin-left: auto;
+    }
   }
   .hourglass {
     @include hourglass(#999);