Use background image for poster

couchpotato/core/media/movie/_base/static/movie.js

@@ -215,15 +215,19 @@ var Movie = new Class({
 
 		var thumbnail = null;
 		if(self.data.files && self.data.files.image_poster && self.data.files.image_poster.length > 0){
-			thumbnail = new Element('img', {
+			thumbnail = new Element('div', {
 				'class': 'type_image poster',
-				'src': Api.createUrl('file.cache') + self.data.files.image_poster[0].split(Api.getOption('path_sep')).pop()
+				'styles': {
+					'background-image': 'url(' + Api.createUrl('file.cache') + self.data.files.image_poster[0].split(Api.getOption('path_sep')).pop() +')'
+				}
 			});
 		}
 		else if(self.data.info && self.data.info.images && self.data.info.images.poster && self.data.info.images.poster.length > 0){
-			thumbnail = new Element('img', {
+			thumbnail = new Element('div', {
 				'class': 'type_image poster',
-				'src': self.data.info.images.poster[0]
+				'styles': {
+					'background-image': 'url(' + self.data.info.images.poster[0] +')'
+				}
 			});
 		}
 

couchpotato/core/media/movie/_base/static/movie.scss

@@ -203,14 +203,16 @@
 
 	> div {
 		display: flex;
-		flex-wrap: wrap;
+		flex-flow: row wrap;
+		align-items: stretch;
 	}
 
 	.movie {
 		margin-bottom: $padding;
 		position: relative;
 		cursor: pointer;
-		flex: 1 1 auto;
+		flex: 1 auto;
+		width: 150px;
 		max-width: 14.285%;
 		border: 0 solid transparent;
 		border-width: 0 $padding/2;
@@ -237,9 +239,11 @@
 
 		.poster {
 			border-radius: $border_radius;
+			background: $theme_off center no-repeat;
+			background-size: cover;
 			overflow: hidden;
 			width: 100%;
-			float: left;
+			padding-bottom: 150%;
 		}
 
 		.data {