From ae6293cb6bf3815ba4e7d85a00eb91affd006cec Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 9 Nov 2018 14:10:23 +0900
Subject: [PATCH] [Client] Improve usability

---
 .../desktop/views/components/media-image.vue  | 21 ++-----------------
 .../mobile/views/components/media-image.vue   |  3 ++-
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index e4594dc21..446e50093 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -7,8 +7,6 @@
 </div>
 <a class="lcjomzwbohoelkxsnuqjiaccdbdfiazy" v-else
 	:href="image.url"
-	@mousemove="onMousemove"
-	@mouseleave="onMouseleave"
 	@click.prevent="onClick"
 	:style="style"
 	:title="image.name"
@@ -45,20 +43,6 @@ export default Vue.extend({
 		}
 	},
 	methods: {
-		onMousemove(e) {
-			const rect = this.$el.getBoundingClientRect();
-			const mouseX = e.clientX - rect.left;
-			const mouseY = e.clientY - rect.top;
-			const xp = mouseX / this.$el.offsetWidth * 100;
-			const yp = mouseY / this.$el.offsetHeight * 100;
-			this.$el.style.backgroundPosition = `${xp}% ${yp}%`;
-			this.$el.style.backgroundImage = `url("${this.image.url}")`;
-		},
-
-		onMouseleave() {
-			this.$el.style.backgroundPosition = '';
-		},
-
 		onClick() {
 			this.$root.new(ImageViewer, {
 				image: this.image
@@ -76,9 +60,8 @@ export default Vue.extend({
 	width 100%
 	height 100%
 	background-position center
-
-	&:not(:hover)
-		background-size cover
+	background-size contain
+	background-repeat no-repeat
 
 .ldwbgwstjsdgcjruamauqdrffetqudry
 	display flex
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index 4d4651676..dbb275b51 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -62,7 +62,8 @@ export default Vue.extend({
 	width 100%
 	height 100%
 	background-position center
-	background-size cover
+	background-size contain
+	background-repeat no-repeat
 
 .qjewsnkgzzxlxtzncydssfbgjibiehcy
 	display flex