diff --git a/src/components/PictureSwipe.vue b/src/components/PictureSwipe.vue index 4ef4502..64ef364 100644 --- a/src/components/PictureSwipe.vue +++ b/src/components/PictureSwipe.vue @@ -78,6 +78,14 @@ export default { type: Object } }, + computed: { + thumbMaxW () { + return this.$mq.mobile ? 242 : 300 + }, + thumbMaxH () { + return this.$mq.mobile ? 104 : 128 + } + }, methods: { open (index, disableAnimation = false) { let that = this @@ -117,13 +125,13 @@ export default { thumbSize (item) { let thumbW = item.w let thumbH = item.h - if (thumbW > 256) { - thumbH = (thumbH * 256) / thumbW - thumbW = 256 + if (thumbW > this.thumbMaxW) { + thumbH = (thumbH * this.thumbMaxW) / thumbW + thumbW = this.thumbMaxW } - if (thumbH > 128) { - thumbW = (thumbW * 128) / thumbH - thumbH = 128 + if (thumbH > this.thumbMaxH) { + thumbW = (thumbW * this.thumbMaxH) / thumbH + thumbH = this.thumbMaxH } return { w: Math.round(thumbW), h: Math.round(thumbH) } } diff --git a/src/components/SummitPhotosGroup.vue b/src/components/SummitPhotosGroup.vue index 5e2691c..dccdc08 100644 --- a/src/components/SummitPhotosGroup.vue +++ b/src/components/SummitPhotosGroup.vue @@ -170,7 +170,7 @@ export default { } .photos >>> figure img { max-height: 128px; - max-width: 256px; + max-width: 300px; background-color: #e7e7e7; } >>> .photo-title { @@ -206,7 +206,7 @@ export default { } .photos >>> figure img { max-height: 104px; - width: auto; + max-width: 242px; } .photo-group { padding: 0.25rem 0 0 0.5rem;