--- a/dom/html/ImageDocument.cpp
+++ b/dom/html/ImageDocument.cpp
@@ -335,22 +335,16 @@ ImageDocument::ShrinkToFit()
   if (!mImageContent) {
     return;
   }
   if (GetZoomLevel() != mOriginalZoomLevel && mImageIsResized &&
       !nsContentUtils::IsChildOfSameType(this)) {
     return;
   }
 
-  // Keep image content alive while changing the attributes.
-  nsCOMPtr<nsIContent> imageContent = mImageContent;
-  nsCOMPtr<nsIDOMHTMLImageElement> image = do_QueryInterface(mImageContent);
-  image->SetWidth(std::max(1, NSToCoordFloor(GetRatio() * mImageWidth)));
-  image->SetHeight(std::max(1, NSToCoordFloor(GetRatio() * mImageHeight)));
-  
   // The view might have been scrolled when zooming in, scroll back to the
   // origin now that we're showing a shrunk-to-window version.
   ScrollImageTo(0, 0, false);
 
   if (!mImageContent) {
     // ScrollImageTo flush destroyed our content.
     return;
   }

--- a/dom/html/ImageDocument.h
+++ b/dom/html/ImageDocument.h
@@ -109,16 +109,19 @@ protected:
   nsresult OnSizeAvailable(imgIRequest* aRequest, imgIContainer* aImage);
   nsresult OnLoadComplete(imgIRequest* aRequest, nsresult aStatus);
   void OnHasTransparency();
 
   nsCOMPtr<nsIContent>          mImageContent;
 
   float                         mVisibleWidth;
   float                         mVisibleHeight;
+  // XXX: The image width/height isn't invalidated to reflect the up-to-date
+  //      width/height of the image frame. In particular when the
+  //      StyleVisibility orientation changes this value isn't updated.
   int32_t                       mImageWidth;
   int32_t                       mImageHeight;
 
   bool                          mResizeImageByDefault;
   bool                          mClickResizingEnabled;
   bool                          mImageIsOverflowingHorizontally;
   bool                          mImageIsOverflowingVertically;
   // mImageIsResized is true if the image is currently resized

--- a/layout/style/ImageDocument.css
+++ b/layout/style/ImageDocument.css
@@ -10,16 +10,19 @@
 
 @media not print {
   .overflowingVertical, .overflowingHorizontalOnly {
     cursor: zoom-out;
   }
 
   .shrinkToFit {
     cursor: zoom-in;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
   }
 }
 
 @media print {
   /* We must declare the image as a block element. If we stay as
   an inline element, our parent LineBox will be inline too and
   ignore the available height during reflow.
   This is bad during printing, it means tall image frames won't know