UFUse（1.6.2）

Appearance

On this page

useContain ​

useContain 通过绝对定位让指定元素在其父元素中保持长宽比的完全显示，就像 img 标签的 css 属性 object-fit: contain 一样。

使用 ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import useContain from 'ufuse/src/hooks/useContain'

const el = ref<HTMLElement>()

useContain({ el, designWidth: 1920, designHeight: 1080 })
</script>

<template>
  <div class="demo">
    <div class="w-80 h-80 relative bg-neutral-500">
      <div ref="el" class="bg-red-200" />
    </div>
  </div>
</template>

预览 ​

API ​

ts
import type { Ref } from 'vue'

export interface UseContainOptions {
  el: Ref<HTMLElement | undefined>
  /**
   * 元素设计宽度
   */
  designWidth: number
  /**
   * 元素设计高度
   */
  designHeight: number
}

贡献者 ​

xieyuhang
cuijin