size image + fix when no file on server

This commit is contained in:
nessar committed 2023-03-16 17:16:33 +01:00
1 parent 0d5669c156
commit 0d972ee0d7
2 files changed
+14 -5

No files matched your search

+10 -3
View File
@@ -16,15 +16,19 @@ export default defineComponent({
</script> </script>
<template> <template>
<div class="flex" v-if="images.keys !== null"> <div class="flex" v-if="images.size > 0">
<div v-for="[id, image] in images" :key="id" class="image"> <div v-for="[id, image] in images" :key="id" class="image">
<label>{{ image.name }}</label> <label>{{ image.name }}</label>
<Image class="gallery" :id="id" :images="images" redirect="home" /> <Image class="gallery" :id="id" :images="images" redirect="home" />
</div> </div>
</div> </div>
<h1 v-else>No image found</h1> <h1 v-else>Aucune image trouvée</h1>
</template> </template>
<style scoped> <style scoped>
h1 {
color: white;
}
.flex { .flex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -58,6 +62,9 @@ label {
<style> <style>
.gallery.imageContainer { .gallery.imageContainer {
margin: 2vw; margin: 2vw;
height: max(33vh, calc(90vh/v-bind('images.size'))); max-height: min(33vh, 33vw);
max-width: min(33vw, 33vh);
height: auto;
width: auto;
} }
</style> </style>
+4 -2
View File
@@ -64,8 +64,10 @@ export default defineComponent({
<style> <style>
.imageContainer img { .imageContainer img {
width: 100%; max-width: 100%;
height: 100%; max-height: 100vh;
height: auto;
width: auto;
object-fit: contain; object-fit: contain;
} }