解决动态图片垂直方向不能完全显示的问题

要解决动态图片在垂直方向上无法完全显示的问题，可以通过调整 CSS 样式中的 `object-fit` 属性和删除不必要的高度限制来实现。具体修改如下：

1. **移除 `.floating-image` 类的高度限制**：删除 `max-height: 100%;` 这一行，以允许图片按其原始比例显示。
2. **设置 `object-fit` 属性**：将 `object-fit` 属性设为 `cover` 或 `contain`，确保图片在不失真的情况下填充或适应父容器。

### 修改后的代码

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
.header-container {
    position: relative;
    width: 100%;
    height: 200px; /* 确保容器高度为200px */
    overflow: hidden;
    margin-bottom: 20px;
}
.floating-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 或者100vw, 如果你想让它横向充满屏幕 */
    object-fit: cover; /* 使用 cover 确保图片覆盖整个区域 */
    transition: transform 0.1s ease;
    max-width: 100%;
}
nav {
    padding: 30px;
}
nav a {
    font-weight: bold;
    color: #2c3e50;
}
nav a.router-link-exact-active {
    color: #42b983;
}
</style>

### 解释

- **`object-fit: cover;`**：确保图片在保持比例的情况下覆盖整个 `.header-container` 区域。如果有需要，图片会被裁剪。
- **移除 `max-height: 100%;`**：取消高度限制，使图片可以按照其自然尺寸显示。

通过以上修改，动态图片应该能够正确地显示在垂直方向上。