小编点评

总结：本文介绍了如何在各种情况下保持图片比例不变，例如在用户缩放窗口等情况。为实现这一目标，本文提出了一个基础功能的组件示例。该组件使用Vue.js编写，通过计算属性动态生成CSS样式，以实现在不同布局下保持图片宽高等比缩放的目的。文章还提到了ChatMoney团队提供的AI应用落地与变现服务，以及加入ChatMoney社区获取更多AI变现方案的途径。总体来说，本文为开发者提供了一个在多种场景下保持图片比例不变的解决方案，并展示了AI技术在变现领域中的应用。

正文

本文由 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变现方案！