如何在Nuxt Picture组件中无需CSS设置100%宽高？

问题原因 #

Nuxt Picture组件的width和height属性默认是用于设置原生<img>标签的像素尺寸属性，目的是帮助浏览器预计算布局空间，并不直接作为CSS样式生效。当你传入百分比值时，组件不会将其转换为对应的CSS样式规则，因此图片无法按预期缩放。

可行解决方案 #

方案1：直接使用内联样式

通过组件的style属性直接注入CSS规则，这是最直接的方式：

<nuxt-picture
  loading="lazy"
  src="/dummy.jpg"
  format="avif,webp"
  fit="cover"
  alt="test"
  style="width: 100%; height: 100%; object-fit: cover;"
/>

方案2：利用组件的属性传递样式到内部标签

Nuxt Picture提供了pictureAttrs和imgAttrs属性，可分别向外层<picture>标签和内部<img>标签传递属性：

<nuxt-picture
  loading="lazy"
  src="/dummy.jpg"
  format="avif,webp"
  fit="cover"
  alt="test"
  :pictureAttrs="{ style: 'width: 100%; height: 100%;' }"
  :imgAttrs="{ style: 'object-fit: cover;' }"
/>

注：组件的fit="cover"属性通常已经会为内部<img>设置object-fit: cover，所以imgAttrs里的样式可以根据实际情况省略。

补充说明 #

如果你的父容器没有明确的尺寸设置，即使给图片设置100%宽高也可能不生效，需要确保父元素有确定的宽高（比如设置width: 100%; height: 300px或者依赖其他布局上下文）。

内容的提问来源于stack exchange，提问作者C T