diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index e8cbb526..4037da98 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -1,5 +1,5 @@ import Attachment from '../attachment/attachment.vue' -import { chunk, last, dropRight } from 'lodash' +import { chunk, last, dropRight, sumBy } from 'lodash' const Gallery = { props: [ @@ -39,13 +39,13 @@ const Gallery = { rowStyle (itemsPerRow) { return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` } }, - itemStyle (id) { + itemStyle (id, row) { + const total = sumBy(row, item => this.getAspectRatio(item.id)) + return { flexGrow: this.getAspectRatio(id) / total } + }, + getAspectRatio (id) { const size = this.sizes[id] - if (size) { - return { flex: size.width / size.height } - } else { - return {} - } + return size ? size.width / size.height : 1 } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 803ec471..7abc2161 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -19,7 +19,7 @@ :attachment="attachment" :allow-play="false" :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)" - :style="itemStyle(attachment.id)" + :style="itemStyle(attachment.id, row)" />