Vue项目中如何实现装饰图拉伸适配容器100%高度并在登录/注册视图自适应尺寸

我来帮你搞定这个图片高度适配的问题，先从你代码里的小错误入手，再给你两个可行的解决方案：

一、先修正拼写错误 #

你在放装饰图的div里写了style="heigth:100%"——这里是拼写错误，应该是height:100%！这个小问题直接导致容器高度不生效，图片自然没法撑满。

二、方案1：用<img>标签实现拉伸填充 #

要让图片始终占满容器100%高度，得给img标签加明确的样式，结合Vuetify的flex布局特性，修改后的代码如下：

<div class="d-flex justify-end align-stretch" style="height:100%; width: auto;">
  <img 
    src="/static/line-decoration2.png" 
    style="height: 100%; width: auto; object-fit: fill;"
    alt="装饰线条"
  />
</div>

• height:100%：让图片继承父容器的高度
• width:auto：如果不需要严格保持宽高比，可以改成width:100%强制拉伸
• object-fit: fill：这就是你要的“允许轻微变形，撑满容器”的效果；要是想保持比例只裁剪多余部分，换成object-fit: cover就行

另外，记得给最外层的<section id="signup">加上style="min-height: 100vh;"，保证整个布局至少占满屏幕高度，这样子容器的height:100%才有参考依据。

三、方案2：用background-image实现重复/拉伸 #

你之前的背景图没显示，核心问题是那个空div没有高度！修正后的代码如下：

<div class="background-decoration"></div>

<style scoped>
.background-decoration {
  height: 100%; /* 必须给容器设置高度 */
  width: auto;
  background-image: url("/static/line-decoration2.png");
  /* 要重复显示就保留下面一行，要拉伸填充就注释掉换后面的 */
  background-repeat: repeat;
  /* 强制拉伸撑满容器（会变形） */
  /* background-size: 100% 100%; */
  /* 保持比例覆盖容器（不变形，可能裁剪） */
  /* background-size: cover; */
}
</style>

同样要确保这个div的父容器有明确的高度，不然height:100%还是不生效。

四、适配登录/注册视图切换 #

因为两个视图的容器高度不同，只要保证图片和父容器的height:100%设置正确，就能自动适配。如果想针对不同视图调整填充方式，还可以用option变量动态绑定样式：

<div class="d-flex justify-end align-stretch" style="height:100%; width: auto;">
  <img 
    src="/static/line-decoration2.png" 
    :style="{ objectFit: option === 0 ? 'fill' : 'cover' }"
    style="height: 100%; width: auto;"
    alt="装饰线条"
  />
</div>

按照上面的步骤调整后，不管切换到登录还是注册视图，装饰图都能撑满容器高度啦！

内容的提问来源于stack exchange，提问作者Adriel Kirch