size image + fix when no file on server
This commit is contained in:
1 parent
0d5669c156
commit
0d972ee0d7
2 files changed
+14
-5
No files matched your search
@@ -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>
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user