adjust aspect ratio of preview size when for aspect ratios > 16/9

apps/files/css/detailsView.css

@@ -40,7 +40,7 @@
 	height: auto;
 }
 
-#app-sidebar .image .thumbnail::before {
+#app-sidebar .image .thumbnail .stretcher {
 	content: '';
 	display: block;
 	padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */

apps/files/js/mainfileinfodetailview.js

@@ -10,7 +10,7 @@
 
 (function() {
 	var TEMPLATE =
-		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"></a></div>' +
+		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
 		'<div class="file-details-container">' +
 		'<div class="fileName"><h3 title="{{name}}" class="ellipsis">{{name}}</h3></div>' +
 		'	<div class="file-details ellipsis">' +
@@ -164,6 +164,15 @@
 				}
 			};
 
+			var getTargetRatio = function(img){
+				var ratio = img.width / img.height;
+				if (ratio > 16/9) {
+					return ratio;
+				} else {
+					return 16/9;
+				}
+			};
+
 			this._fileList.lazyLoadPreview({
 				path: path,
 				mime: mime,
@@ -193,6 +202,11 @@
 						height: (targetHeight > smallPreviewSize)? 'auto': targetHeight,
 						'max-height': isSmall(img)? targetHeight: null
 					});
+
+					var targetRatio = getTargetRatio(img);
+					$iconDiv.find('.stretcher').css({
+						'padding-bottom': (100 / targetRatio) + '%'
+					});
 				}.bind(this),
 				error: function () {
 					$iconDiv.removeClass('icon-loading icon-32');