minor with MyPicture

components/MyPicture.vue

@@ -5,14 +5,14 @@
 
     <img 
       v-if='media' 
-      :class='{ "u-featured": true, loading }'
+      :class='{ "u-featured": true, loading: true }'
       :alt='media.name' :loading='lazy?"lazy":"eager"'
       :src="src"
       :srcset="srcset"
       itemprop="image"
       :height="height" :width="width"
       :style="{ 'object-position': thumbnailPosition }"
-      @load="loaded">
+      onload="this.classList.remove('loading')">
 
     <img v-else-if='!media && thumb' class='thumb' src="noimg.svg" alt=''>
 
@@ -28,9 +28,6 @@ export default {
     lazy: { type: Boolean, default: false },
     showPreview: { type: Boolean, default: true }
   },
-  data () {
-    return { loading: true }
-  },
   computed: {
     backgroundPreview () {
       if (this.media && this.media.preview) {
@@ -67,11 +64,6 @@ export default {
       }
       return 'center center'
     },
-  },
-  methods: {
-    loaded () {
-      this.loading = false
-    }
   }
 }
 </script>
@@ -83,10 +75,12 @@ export default {
   position: relative;
   overflow: hidden;
   display: flex;
-  background-size: cover;
+  background-size: contain;
 }
 
 .img img {
+  object-fit: contain;
+  max-height: 125vh;
   display: flex;
   width: 100%;
   max-width: 100%;
@@ -107,7 +101,7 @@ export default {
 }
 
 .img img.loading {
-  opacity: 0;
+  opacity: 0.1;
 }
 
 </style>

pages/event/_slug.vue

@@ -9,12 +9,12 @@ v-container#event.pa-0.pa-sm-2
     v-card-text
 
       v-row
-        v-col.col-12.col-lg-8
+        v-col.col-12.col-md-8
           //- fake image to use u-featured in h-event microformat
           MyPicture(v-if='hasMedia' :event='event')
           .p-description.text-body-1.pa-3.rounded(v-if='!hasMedia && event.description' itemprop='description' v-html='event.description')
 
-        v-col.col-12.col-lg-4
+        v-col.col-12.col-md-4
           v-card(outlined)
             v-card-text
               v-icon.float-right(v-if='event.parentId' color='success' v-text='mdiRepeat')