Merge branch 'image-sizing' into 'master'

Image sizing

## What does this MR do?

Limits image height to fit the screen. The wrapping div is so the image is guaranteed to be a block element without the link area growing to be larger than the image itself.

## Are there points in the code the reviewer needs to double check?

Make sure this can't be done in a more performant or concise way with Banzai.

## Why was this MR needed?

Images were displayed at their full resolution, which made it difficult to read issues when the image height was greater than the viewport height (see #18861).

## What are the relevant issue numbers?

Fixes #18861.

## Screenshots (if relevant)

Before:

![Screen_Shot_2016-06-20_at_3.25.26_PM](/uploads/158424375ade95adcd337ccd34c48747/Screen_Shot_2016-06-20_at_3.25.26_PM.png)

After:

![Screen_Shot_2016-06-20_at_3.24.57_PM](/uploads/f1a3b5f6442e4e3b1067332a547fb1c8/Screen_Shot_2016-06-20_at_3.24.57_PM.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

cc: @jschatz1 @dzaporozhets @rspeicher

See merge request !4810

7 files changed, 19 insertions, 2 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 586cd57d308..74e8c5be509 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -4,6 +4,7 @@ v 8.10.0 (unreleased)
   - Replace Haml with Hamlit to make view rendering faster. !3666
   - Wrap code blocks on Activies and Todos page. !4783 (winniehell)
   - Add Sidekiq queue duration to transaction metrics.
+  - Make images fit to the size of the viewport !4810
   - Fix MR-auto-close text added to description. !4836
   - Fix pagination when sorting by columns with lots of ties (like priority)
   - Exclude email check from the standard health check
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 0b710ef168b..00ab42bec5c 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -63,5 +63,6 @@
     border: 1px solid $table-border-gray;
     padding: 5px;
     margin: 5px;
+    max-height: calc(100vh - 100px);
   }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 21ff6ab71f0..542fa244689 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -10,6 +10,7 @@
     border: 1px solid $table-border-gray;
     padding: 5px;
     margin: 5px;
+    max-height: calc(100vh - 100px);
   }
 }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index ffba3dc5bc6..ee7c98f805b 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -113,6 +113,7 @@ ul.notes {
           border: 1px solid $table-border-gray;
           padding: 5px;
           margin: 5px 0;
+          max-height: calc(100vh - 100px);
         }
       }
     }
diff --git a/lib/banzai/filter/image_link_filter.rb b/lib/banzai/filter/image_link_filter.rb
index ccd106860bd..8aa6f8f124a 100644
--- a/lib/banzai/filter/image_link_filter.rb
+++ b/lib/banzai/filter/image_link_filter.rb
@@ -9,6 +9,11 @@ module Banzai
       def call
         doc.xpath('descendant-or-self::img[not(ancestor::a)]').each do |img|
 
+          div = doc.document.create_element(
+            'div',
+            class: 'image-container'
+          )
+
           link = doc.document.create_element(
             'a',
             class: 'no-attachment-icon',
@@ -17,7 +22,10 @@ module Banzai
           )
 
           link.children = img.clone
-          img.replace(link)
+
+          div.children = link
+
+          img.replace(div)
         end
 
         doc
diff --git a/spec/features/atom/users_spec.rb b/spec/features/atom/users_spec.rb
index de6aed74fb4..91704377a07 100644
--- a/spec/features/atom/users_spec.rb
+++ b/spec/features/atom/users_spec.rb
@@ -61,7 +61,7 @@ describe "User Feed", feature: true  do
       end
 
       it 'should have XHTML summaries in merge request descriptions' do
-        expect(body).to match /Here is the fix: <a[^>]*><img[^>]*\/><\/a>/
+        expect(body).to match /Here is the fix: <\/p><div[^>]*><a[^>]*><img[^>]*\/><\/a><\/div>/
       end
     end
   end
diff --git a/spec/lib/banzai/filter/image_link_filter_spec.rb b/spec/lib/banzai/filter/image_link_filter_spec.rb
index dd5594750c8..a2a1ed58d1b 100644
--- a/spec/lib/banzai/filter/image_link_filter_spec.rb
+++ b/spec/lib/banzai/filter/image_link_filter_spec.rb
@@ -21,4 +21,9 @@ describe Banzai::Filter::ImageLinkFilter, lib: true do
     doc = filter(image('https://i.imgur.com/DfssX9C.jpg'))
     expect(doc.at_css('img')['src']).to eq doc.at_css('a')['href']
   end
+
+  it 'wraps the image with a link and a div' do
+    doc = filter(image('/uploads/e90decf88d8f96fe9e1389afc2e4a91f/test.jpg'))
+    expect(doc.to_html).to include('<div class="image-container">')
+  end
 end