无法用object-position定位<NuxtImg />组件图片的问题求助

问题描述 #

尝试给 <NuxtImg /> 组件添加 Tailwind CSS 的 object-top 类实现图片从顶部渲染，虽然 DOM 中已显示 object-position: top; 样式生效，但页面无视觉变化。改用普通 <img> 标签时该样式可正常工作。

NuxtImg 组件代码 #

<script setup lang="ts">
    interface Props {
        link: string
        alternativeText: string
    }

    const { link, alternativeText } = defineProps<Props>()
</script>

<template>
    <li class="min-w-48">
        <NuxtImg class="object-top w-full h-auto" width="1200" height="1600" :src="link" :alt="alternativeText" />
    </li>
</template>

普通 img 标签代码 #

<script setup lang="ts">
    interface Props {
        link: string
        alternativeText: string
    }
    
    const { link, alternativeText } = defineProps<Props>()
</script>

<template>
    <li class="min-w-48">
        <img class="object-top w-full h-auto" width="1200" height="1600" :src="link" :alt="alternativeText" />
    </li>
</template>

nuxt.config.ts 配置 #

export default defineNuxtConfig({
    devtools: { enabled: true },

    runtimeConfig: {
        strapi: {
            url: process.env.STRAPI_BASE_URL || "http://localhost:1337",
        },
    },
    modules: ["@nuxtjs/tailwindcss", "@nuxtjs/strapi", "@nuxt/image"],
    plugins: ["~/plugins/gsap.js"],
})

解决方法 #

1. 给容器/图片设置固定高度 #

object-position 生效的前提是图片有明确的高度限制，且图片宽高比与容器不一致。当前代码中 h-auto 让图片高度自适应，导致 object-top 无法体现效果。可以给父元素或图片本身设置固定高度：

<template>
    <li class="min-w-48 h-64">
        <NuxtImg class="object-top w-full h-full object-cover" width="1200" height="1600" :src="link" :alt="alternativeText" />
    </li>
</template>

2. 用深度选择器强制作用到内部 img #

NuxtImg 会生成嵌套 DOM 结构，自定义样式可能未作用到实际图片元素。通过深度选择器强制应用样式：

<template>
    <li class="min-w-48">
        <NuxtImg class="nuxt-img-top w-full h-64" width="1200" height="1600" :src="link" :alt="alternativeText" />
    </li>
</template>

<style scoped>
.nuxt-img-top :deep(img) {
    object-position: top;
    object-fit: cover;
}
</style>

3. 使用 NuxtImg 原生属性 #

NuxtImg 提供 objectFit 和 objectPosition 原生属性，直接配置即可：

<NuxtImg 
    class="w-full h-64" 
    width="1200" 
    height="1600" 
    :src="link" 
    :alt="alternativeText"
    object-fit="cover"
    object-position="top"
/>

4. 确保图片有裁剪/缩放空间 #

如果图片尺寸和容器完全匹配，object-top 不会有视觉变化。配合 object-fit: cover 或 object-fit: contain 使用，让图片产生裁剪或缩放，才能显现 object-position 的效果。

内容的提问来源于stack exchange，提问作者Dariusz Legizynski