Vue3等比例縮放圖片元件

ChatMoney發表於2024-06-07
Vue元件

本文由 ChatMoney團隊出品

有些情況我們需要在各種刁鑽的情況下都要保持圖片比例不變，比如使用者縮放視窗等改變佈局的情況。實現原理就是透過容器的寬度和內邊距在保持你想要的比例。

以下是基礎功能的元件示例：

<template>
    <div style="position: relative" :style="ratioStr">
        <div style="position: absolute; inset: 0px; user-select: none">
            <img
                v-if="type === 'image'"
                :src="src"
                :alt="alt || src"
                style="object-fit: cover; width: 100%; height: 100%" />
            <video
                v-else
                :src="src"
                controls
                style="object-fit: contain; width: 100%; height: 100%" />
        </div>
    </div>
</template>

<script lang="ts" setup>
const props = defineProps({
    ratio: {
        type: Array as unknown as () => [number, number],
        default: () => [1, 1],
    },
    alt: {
        type: String,
        default: "",
    },
    type: {
        type: String as () => "image" | "video",
        default: "image",
    },
    src: {
        type: String,
        default: "",
    },
});

const ratioStr = computed(() => {
    const [width, paddingBottom] = props.ratio;
    return `width: 100%;padding-bottom: ${(paddingBottom / width) * 100}%;`;
});
</script>

<style lang="scss" scoped></style>

關於我們

本文由ChatMoney團隊出品，ChatMoney專注於AI應用落地與變現，我們提供全套、持續更新的AI原始碼系統與可執行的變現方案，致力於幫助更多人利用AI來變現，歡迎進入ChatMoney獲取更多AI變現方案！

相關文章