tiny-vue/examples/sites/demos/mobile-first/app/image/auto-fit-container-size.vue

25 lines
554 B
Vue

<template>
<div style="overflow: hidden">
<div class="float-left ml-10" v-for="fit in fits" :key="fit">
<div class="text-center">{{ fit }}</div>
<tiny-image :image-size="100" :src="url" :fit="fit"></tiny-image>
</div>
</div>
</template>
<script>
import { Image } from '@opentiny/vue'
export default {
components: {
TinyImage: Image
},
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
}
}
}
</script>