diff --git a/src/views/CameraCapture.vue b/src/views/CameraCapture.vue
index b85a811..a9095c5 100644
--- a/src/views/CameraCapture.vue
+++ b/src/views/CameraCapture.vue
@@ -227,8 +227,12 @@ export default {
 				this.photo.width = document.getElementById('camera_preview').offsetWidth
 				this.photo.height = document.getElementById('camera_preview').offsetHeight
 
-				this.$refs.camera.width = this.stream.width
-				this.$refs.camera.height = this.stream.height
+				if (this.stream.width > this.stream.height) {
+					this.$refs.camera.width = this.photo.width
+				} else {
+					let ratio = this.photo.height / this.stream.height
+					this.$refs.camera.width = this.stream.width * ratio
+				}
 			}).catch(error => {
 				this.message.error('Cannot load device camera! '+error)
 			})
@@ -319,6 +323,7 @@ html, body {
 
 #camera_preview {
 	height: 75vh;
+	width: 100%;
 }
 
 #group_select {
@@ -330,7 +335,7 @@ html, body {
 	display: flex;
 	flex-direction: column;
 	text-align: center;
-	margin-top: 30%;
+	margin-top: 25vh;
 }
 
 #prompt_select .n-icon {
@@ -343,11 +348,11 @@ html, body {
 	display: flex;
 	justify-content: center;
 	bottom: 0;
-	position: absolute;
+	position: fixed;
 	width: 100%;
 }
 
 #take_photo .n-button {
-	margin-top: 30%;
+	margin-top: 5vh;
 }
 </style>
\ No newline at end of file