gitweb: Avoid overflowing page body frame with large images

andrewkeller · gitster · commit 46a7471f0e20 · 2014-02-20T09:50:14.000-08:00
When displaying a blob in gitweb, if it's an image, specify constraints for
maximum display width and height to prevent the image from overflowing the
frame of the enclosing page_body div.

This change assumes that it is more desirable to see the whole image without
scrolling (new behavior) than it is to see every pixel without zooming
(previous behavior).

Signed-off-by: Andrew Keller &lt;andrew@kellerfarm.com&gt;
Signed-off-by: Junio C Hamano &lt;gitster@pobox.com&gt;
diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl
@@ -7094,7 +7094,7 @@ sub git_blob {
 	git_print_page_path($file_name, "blob", $hash_base);
 	print "<div class=\"page_body\">\n";
 	if ($mimetype =~ m!^image/!) {
-		print qq!<img type="!.esc_attr($mimetype).qq!"!;
+		print qq!<img class="blob" type="!.esc_attr($mimetype).qq!"!;
 		if ($file_name) {
 			print qq! alt="!.esc_attr($file_name).qq!" title="!.esc_attr($file_name).qq!"!;
 		}
diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
@@ -32,6 +32,11 @@ img.avatar {
 	vertical-align: middle;
 }
 
+img.blob {
+	max-height: 100%;
+	max-width: 100%;
+}
+
 a.list img.avatar {
 	border-style: none;
 }

Original file line number	Diff line number	Diff line change
`@@ -7094,7 +7094,7 @@ sub git_blob {`
`7094`	`7094`	`git_print_page_path($file_name, "blob", $hash_base);`
`7095`	`7095`	`print "<div class=\"page_body\">\n";`
`7096`	`7096`	`if ($mimetype =~ m!^image/!) {`
`7097`		`- print qq!<img type="!.esc_attr($mimetype).qq!"!;`
	`7097`	`+ print qq!<img class="blob" type="!.esc_attr($mimetype).qq!"!;`
`7098`	`7098`	`if ($file_name) {`
`7099`	`7099`	`print qq! alt="!.esc_attr($file_name).qq!" title="!.esc_attr($file_name).qq!"!;`
`7100`	`7100`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,11 @@ img.avatar {`
`32`	`32`	`vertical-align: middle;`
`33`	`33`	`}`
`34`	`34`
	`35`	`+img.blob {`
	`36`	`+ max-height: 100%;`
	`37`	`+ max-width: 100%;`
	`38`	`+}`
	`39`	`+`
`35`	`40`	`a.list img.avatar {`
`36`	`41`	`border-style: none;`
`37`	`42`	`}`