@oiij/use/dist/composables/use-auto-ratio.js

Som Composable Functions for Vue 3

import { useElementSize, useWindowSize } from "@vueuse/core";
import { computed, ref, watchEffect } from "vue";

//#region src/composables/use-auto-ratio.ts
function useAutoRatio(ratio = 1, target) {
	const domRef = ref();
	const elementSize = useElementSize(target);
	const windowSize = useWindowSize();
	const targetWidth = computed(() => domRef.value ? elementSize.width.value : windowSize.width.value);
	const targetHeight = computed(() => domRef.value ? elementSize.height.value : windowSize.height.value);
	const aspectRatio = computed(() => {
		if (targetHeight.value === 0) return Infinity;
		return targetWidth.value / targetHeight.value;
	});
	const width = computed(() => aspectRatio.value > ratio ? targetHeight.value * ratio : targetWidth.value);
	const height = computed(() => aspectRatio.value > ratio ? targetHeight.value : targetWidth.value / ratio);
	watchEffect(() => {
		if (domRef.value) {
			domRef.value.style.width = `${width.value}px`;
			domRef.value.style.height = `${height.value}px`;
		}
	});
	return {
		domRef,
		width,
		height
	};
}

//#endregion
export { useAutoRatio };